Originariamente inviata da
m4rko80
Ciao, con lo style e border dai il bordo esterno alla tabella/tag.
Se vuoi il bordo interno delle celle devi usare <table border="1" ....>
Mmmm... Ho modificato entrambi i codici HTML e CSS e ora l'header risulta non allineato alle righe dellla sua colonna di corrispondenza....insomma l'header è storto rispetto al normale. Devo usare le percentuali perchè se viene ingrandito viene brutto. Qualcuno mi può aiutare per questo banale problema?
HTML:
codice:
<html>
<head>
<link href="tabella.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div1">
<table class="tab1">
<colgroup>
<col width="5%" />
<col width="20%" />
<col width="10%" />
<col width="15%" />
<col width="10%" />
<col width="17%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<tbody>
<tr class="style1">
<th class="style1">
Prev. N.
</th>
<th class="style1">
Cliente
</th>
<th class="style1">
Telefono
</th>
<th class="style1">
Veicolo
</th>
<th class="style1">
Prev. Consegna
</th>
<th class="style1">
Stato
</th>
<th class="style1">
Priorità
</th>
<th class="style1">
</th>
</tr>
</tbody>
</table>
<div class="div2">
<table class="tab2">
<colgroup>
<col width="5%" />
<col width="20%" />
<col width="10%" />
<col width="15%" />
<col width="10%" />
<col width="17%" />
<col width="10%" />
<col width="10%" />
</colgroup>
<tbody class="style1">
<tr class="style1">
<td class="style2">
Row A-1
</td>
<td class="style2">
Row A-2
</td>
<td class="style2">
Row A-3
</td>
<td class="style2">
Row A-4
</td>
<td class="style2">
Row A-5
</td>
<td class="style2">
Row A-6
</td>
<td class="style2">
Row A-7
</td>
<td class="style2">
</td>
</tr>
<tr class="style1">
<td class="style2">
Row A-1
</td>
<td class="style2">
Row A-2
</td>
<td class="style2">
Row A-3
</td>
<td class="style2">
Row A-4
</td>
<td class="style2">
Row A-5
</td>
<td class="style2">
Row A-6
</td>
<td class="style2">
Row A-7
</td>
<td class="style2">
</td>
</tr>
<tr class="style1">
<td class="style2">
Row A-1
</td>
<td class="style2">
Row A-2
</td>
<td class="style2">
Row A-3
</td>
<td class="style2">
Row A-4
</td>
<td class="style2">
Row A-5
</td>
<td class="style2">
Row A-6
</td>
<td class="style2">
Row A-7
</td>
<td class="style2">
</td>
</tr>
<tr class="style1">
<td class="style2">
Row A-1
</td>
<td class="style2">
Row A-2
</td>
<td class="style2">
Row A-3
</td>
<td class="style2">
Row A-4
</td>
<td class="style2">
Row A-5
</td>
<td class="style2">
Row A-6
</td>
<td class="style2">
Row A-7
</td>
<td class="style2">
</td>
</tr>
<tr class="style1">
<td class="style2">
Row A-1
</td>
<td class="style2">
Row A-2
</td>
<td class="style2">
Row A-3
</td>
<td class="style2">
Row A-4
</td>
<td class="style2">
Row A-5
</td>
<td class="style2">
Row A-6
</td>
<td class="style2">
Row A-7
</td>
<td class="style2">
</td>
</tr>
<tr class="style1">
<td class="style2">
Row A-1
</td>
<td class="style2">
Row A-2
</td>
<td class="style2">
Row A-3
</td>
<td class="style2">
Row A-4
</td>
<td class="style2">
Row A-5
</td>
<td class="style2">
Row A-6
</td>
<td class="style2">
Row A-7
</td>
<td class="style2">
</td>
</tr>
<tr class="style1">
<td class="style2">
Row A-1
</td>
<td class="style2">
Row A-2
</td>
<td class="style2">
Row A-3
</td>
<td class="style2">
Row A-4
</td>
<td class="style2">
Row A-5
</td>
<td class="style2">
Row A-6
</td>
<td class="style2">
Row A-7
</td>
<td class="style2">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<body>
</html>
CSS:
codice:
.div1{ margin: 0;
padding: 0;
border-collapse: collapse;
width: 100%;/*519px;*/
height: 140px;
overflow: hidden;
border: 1px solid #666666;
}
.tab1{
margin: 0;
padding: 0;
background-image: url(img/grigio_scuro.png);
background-repeat: repeat-x;
border-collapse: collapse;
color: #FFFFFF;
width: 100%;/*517px;*/
height: 22px;
text-align: center;
font-family: Arial;
font-weight:bold;
font-size:9pt;
}
.style1{
margin: 0;
padding: 0;
border-collapse: collapse;
}
.style2{
border: 1px solid #CCCCCC;
}
.div2{
margin: 0;
padding: 0;
border-collapse: collapse;
width: 100%; /* 517px; */
height: 120px;
overflow: auto;
}
.tab2{
margin: 0;
padding: 0;
border-collapse: collapse;
width: 100%; /*500px;*/
font-family: Arial;
font-weight:bold;
font-size:9pt;
text-align:center;
}
Risultato:
Tabella New.jpg
Grazie
Cris
Rispondi quotando
