Chciałem zrobić tabelkę przy pomocy CSS kody wyglądają tak:
Kod xhtml:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//PL">
<html>
<head>
<title>Tytuł</title>
<link href="styl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<colgroup>
<col class="ver" />
<col class="ver" />
<col class="ver" />
<col class="ver" />
</colgroup>
<tr>
<th>L.p.</th>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td class="ver2">1</td>
<td class="ver3">Ala</td>
<td class="ver3">Nowak</td>
<td class="ver2">32</td>
</tr>
<tr>
<td class="ver2">2</td>
<td class="ver3">Ola</td>
<td class="ver3">Kosek</td>
<td class="ver2">17</td>
</tr>
<tr>
<td class="ver2">3</td>
<td class="ver3">Ela</td>
<td class="ver3">Mróz</td>
<td class="ver2">83</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tytuł</title>
<link href="styl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<colgroup>
<col class="ver" />
<col class="ver" />
<col class="ver" />
<col class="ver" />
</colgroup>
<tr>
<th>L.p.</th>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td class="ver2">1</td>
<td class="ver3">Ala</td>
<td class="ver3">Nowak</td>
<td class="ver2">32</td>
</tr>
<tr>
<td class="ver2">2</td>
<td class="ver3">Ola</td>
<td class="ver3">Kosek</td>
<td class="ver2">17</td>
</tr>
<tr>
<td class="ver2">3</td>
<td class="ver3">Ela</td>
<td class="ver3">Mróz</td>
<td class="ver2">83</td>
</tr>
</table>
</body>
</html>
a kod style.css:
CODE
body{
background-color: green;
}
table{
margin:auto;
border-collapse: collapse;
width: 484px;
height: 146px;
}
td{
border: 1px solid black;
background-color: green;
}
th{
border: 3px solid black;
border-collapse: collapse;
background-color: green;
}
.ver{
border: 3px solid black;
border-collapse: collapse;
background-color: green;
}
.ver2{
text-align: center;
}
.ver3{
text-indent: 16pt;
}
background-color: green;
}
table{
margin:auto;
border-collapse: collapse;
width: 484px;
height: 146px;
}
td{
border: 1px solid black;
background-color: green;
}
th{
border: 3px solid black;
border-collapse: collapse;
background-color: green;
}
.ver{
border: 3px solid black;
border-collapse: collapse;
background-color: green;
}
.ver2{
text-align: center;
}
.ver3{
text-indent: 16pt;
}
Całość : http://www.speedyshare.com/files/27290976/gotowe2.zip
Zdjęcie, jak powinno wyglądać :
Na prawie każdej (poza IE) przeglądarce, strona wygląda normalnie tj. te dwie środkowe linie są mniejszej grubości niż pozostałe, a cała reszta ma grubość 3px. Jednak, gdy otworzę to w IE to nagłówek ma właściwą grubość ramki - 3px, natomiast cała reszta ramki - 1px zamiast tego, co na zdjęciu. Poza tym IE nie wyśrodkowuje tabelki, w innych przeglądarkach nie ma z tym problemu.
