[CSS] Eliminare i bordi ostinati [Archivio]

__ZERO_UNO__

24-08-2011, 13:34

Ciao, grazie per essere entrati nel topic :D.
Non riesco a eliminare i bordi fra le celle viola della tabella, di cui potete vedere il codice in basso. Avete dei consigli da darmi? Allego un link che permette di vedere direttamente il risultato e anche di modificarlo on-the-fly.
Grazie mille.

LINK : http://jsfiddle.net/cVXAZ/

HTML

<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="stile.css"/>
<title></title>
<table id="tableau">
<thead>
<tr id="first_row">
<td id="result"></td>
<td class="second_col"><input type="text" class="cell" value="3" /></td>
<td><input type="text" class="cell" value="1"/></td>
<td><input type="text" class="cell" value="0"/></td>
<td><input type="text" class="cell" value="0"/></td>
<td><input type="text" class="cell" value="0"/></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="cell" value="9"/></td>
<td class="second_col"><input type="text"value="1" /></td>
<td><input type="text" class="cell" value="1"/></td>
<td><input type="text" class="cell"value="1" /></td>
<td><input type="text" class="cell"value="0" /></td>
<td><input type="text" class="cell"value="0" /></td>
</tr>
<tr>
<td><input type="text" class="cell"value="6" /></td>
<td class="second_col"><input type="text" value="1" /></td>
<td><input type="text" class="cell" value="0"/></td>
<td><input type="text" class="cell"value="0" /></td>
<td><input type="text" class="cell"value="1" /></td>
<td><input type="text" class="cell"value="0" /></td>
</tr>
<tr>
<td><input type="text" class="cell"value="5" /></td>
<td class="second_col"><input type="text" value="0" /></td>
<td><input type="text" class="cell" value="1"/></td>
<td><input type="text" class="cell"value="0" /></td>
<td><input type="text" class="cell"value="0" /></td>
<td><input type="text" class="cell"value="1" /></td>
</tr>
</tbody>
</table>

</form>

</div>

</body>

</html>

CSS:

table {
border-collapse: collapse;
border: 1px solid #CCCCCC;
}

tr td {
padding: 0;
border: 1px solid #CCCCCC;
margin: 1em;
}

.main {
border: 3px dotted blue;
margin: 0pt auto;
padding: 2em;
width: 50em;
}

input {
border: 0pt none;
font-size: 1em;
height: 2.5em;
text-align: center;
width: 5em;
}

thead input {
background-color: violet;
}

#first_row {
border-bottom: 1em solid #CCCCCC;
}

.second_col {
border-left: 1em solid #CCCCCC;
}

Dr Nick Riviera

24-08-2011, 14:40

Non ho capito con quel link che hai postato come si faccia a vedere il risultato dopo la modifica, comunque questo dovrebbe essere quello di cui hai bisogno:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<style type="text/css">
table {
border-collapse: collapse;
border: 1px solid #CCCCCC;
}

tr td {
padding: 0;
border: 1px solid #CCCCCC;
margin: 1em;
}

.main {
border: 3px dotted blue;
margin: 0pt auto;
padding: 2em;
width: 50em;
}

input {
border: 0pt none;
font-size: 1em;
height: 2.5em;
text-align: center;
width: 5em;
}

thead input {
background-color: #ee82ee;
}

#first_row {
border-bottom: 1em solid #CCCCCC;
}

.second_col {
border-left: 1em solid #CCCCCC;
}

.noborder { border-right-color: #ee82ee; border-left-color: #ee82ee;}
.noborderright { border-right: solid 1px #ee82ee;}
</style>
</head>
<body>
<table id="tableau">
<thead>
<tr id="first_row">
<td id="result"></td>
<td class="second_col noborderright"><input type="text" class="cell" value="3" /></td>
<td class="noborder"><input type="text" class="cell" value="1" /></td>
<td class="noborder"><input type="text" class="cell" value="0" /></td>
<td class="noborder"><input type="text" class="cell" value="0" /></td>
<td class="noborder"><input type="text" class="cell" value="0" /></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="cell" value="9"/></td>
<td class="second_col"><input type="text"value="1" /></td>
<td><input type="text" class="cell" value="1"/></td>
<td><input type="text" class="cell"value="1" /></td>
<td><input type="text" class="cell"value="0" /></td>
<td><input type="text" class="cell"value="0" /></td>
</tr>
<tr>
<td><input type="text" class="cell"value="6" /></td>
<td class="second_col"><input type="text" value="1" /></td>
<td><input type="text" class="cell" value="0"/></td>
<td><input type="text" class="cell"value="0" /></td>
<td><input type="text" class="cell"value="1" /></td>
<td><input type="text" class="cell"value="0" /></td>
</tr>
<tr>
<td><input type="text" class="cell"value="5" /></td>
<td class="second_col"><input type="text" value="0" /></td>
<td><input type="text" class="cell" value="1"/></td>
<td><input type="text" class="cell"value="0" /></td>
<td><input type="text" class="cell"value="0" /></td>
<td><input type="text" class="cell"value="1" /></td>
</tr>
</tbody>
</table>
</body>
</html>

__ZERO_UNO__

24-08-2011, 14:54

Grazie mille Dr Nick Riviera
Ciao