+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: HTML/CSS Tabela - problem z szerokością komórek (/thread-html-css-tabela-problem-z-szeroko%C5%9Bcia-komorek)
HTML/CSS Tabela - problem z szerokością komórek - hghormone - 08-05-2011
Witam.
Tworzę właśnie tabele, która będzie wypełniona danymi z mySQL.
Już na początku pojawił się problem z szerokościami komórek, jaki sam przypisałem w CSS.
Problem mój opisze na prostym przykładzie:
HTML:
Kod:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<table>
<caption>Tabela</caption>
<tr>
<td class="a">aaaaa</td>
<td class="b">aaaaa</td>
<td class="c">aaaaa</td>
<td class="d">aaaaa</td>
<td class="e">aaaaa</td>
<td class="f">aaaaa</td>
<td class="g">aaaaa</td>
<td class="h">aaaaa</td>
<td class="i">aaaaa</td>
<td class="j">aaaaa</td>
<td class="k">aaaaa</td>
<td class="l">aaaaa</td>
</tr>
</table>
</body>CSS:
Kod:
table {
width : 100%;
margin: 0px auto 0px;
table-layout: fixed;
}
td.a {
width:10% ;overflow:hidden;
}
td.b {
width:10% ;overflow:hidden;
}
td.c {
width:10% ;overflow:hidden;
}
td.d {
width:10% ;overflow:hidden;
}
td.e {
width:10% ; ;overflow:hidden;
}
td.f {
width:10% ; ;overflow:hidden;
}
td.g{
width 10% ;overflow:hidden;
}
td.h{
width 10% ;overflow:hidden;
}
td.i{
width 5% ;overflow:hidden;
}
td.j{
width 5% ;overflow:hidden;
}
td.k {
width 5% ;overflow:hidden;
}
td.l {
width 5% ;overflow:hidden;
}
}
table thead {
background: #000;
color: #fff;
}
table tbody {
background: transparent;
color: #000;
}
table tfoot {
background: #525252;
color: #fff;
text-align: right;
}
table tfoot a:link, table tfoot a:visited {
color: #fff;
text-decoration: underline;
}
table tfoot a:hover {
color: #fff;
text-decoration: none;
}
table tbody tr:hover {
background: #FFE9A0;
}
table tbody tr:nth-child(even) {
background: #EBEBEB;
}
table tbody tr:nth-child(odd) {
background: #D6D6D6;
}
table tbody tr:hover {
background: #FFE9A0;
}Jak widać w powyższym przykładzie, utworzyłem tabele, która posiada 12 komórek , z czego 8 komórek (a-h) ma przypisane wartości "width 10%", a pozostałe 4 komórki (i-l) mają przypisane wartości "width 5%".
Problem polega na tym, że po wyświetleniu powyższego przykładu komórki od a-f są tej samej szerokośći oraz komórki od g-l mają inną szerokość, także połowa tabeli jest jednej szerokośći a druga połowa innej.A ja przecież przypisałem inne wartości komórek.Jest ktoś w stanie pomóc ?