Spójrz na ten przykład tutaj:szerokość tbody nie automatycznie rozszerzenie do szerokości stołu
a czerwony tabelach poniżej „specyfikacji” nie staje się pełna szerokość zawierające go - podczas inspekcji w Firebug element div nie ma 220 pikseli, a raczej nieco ponad 100 pikseli w zależności od szerokości zawartości.
<div class="grid_4 alpha">
<table width="100%" class="grid_4 alpha omega">
<tr class="specrow">
<td class="specname">type:</td>
<td class="specvalue">House</td>
</tr>
<tr class="specrow">
<td class="specname">year:</td>
<td class="specvalue">1986</td>
</tr>
</table>
</div>
kod CSS wygląda następująco:
#listing_specs table {
width: 100%;
}
#listing_specs table tbody {
display: table-row-group;
width: 100%;
}
.specrow {
margin:2px 0px;
border-bottom:1px dotted #dadada;
color: #fff;
width: 100%;
background-color: #A92229;
}
.specrow:hover {
background-color:#fff;
color:#333;
}
.specname{
font-weight: 600;
padding:2px 2px 2px 5px;
width: 50%;
white-space: nowrap;
}
.specvalue {
font-weight:normal;
padding:2px 5px 2px 5px;
text-align:left;
width: 50%;
}
wiem, że jest to ogólny CSS resetter, i myślę, że to, co jest przyczyną problemu. Niestety nie mogę tego zrobić i po prostu usunąć odniesienie do niego, ponieważ wiele witryn odnosi się do niego z tej samej lokalizacji w tej chwili i nie mogę po prostu wprowadzić tej zmiany bez dokładnej analizy. Potrzebuję więc sposobu na przesłonięcie go w samym arkuszu stylów. Wywoływany kod CSS do resetowania to:
<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/reset.css" />
Wow. Tak prosty i skuteczny. Dzięki! – jeffkee
spędził minutę na zalogowaniu się, aby oddać głos, ponieważ znacznie zaoszczędził mi czas. – MAK
yep i zepsułem to z wyświetlaczem: inline-block - ale mógłbym użyć display: inline-table too zamiast – Fanky