Почему TD не расширяется, как ожидалось?

У нас странная ситуация, когда в html-таблице, которая является 100% -ным и прокручиваемым TBODY, которая равна 100% -ная ширина также, она не расширяет способ, который мы хотим ТОЛЬКО в ситуации, когда у нас малое количество строк (так что нам не нужна прокрутка).Почему TD не расширяется, как ожидалось?

Примечание: для меня очень важно работать с%.

У меня есть те же классы, что и для всех TD, и я ожидаю увидеть их всех с одинаковой шириной.

В результате получается следующее. http://jsfiddle.net/FqDfy/

<div id="pnlData"> 
    <table class="sortable filterable TF" id="htmlTabela" style="display: block;"> 
     <thead class="fixedContent"> 
      <tr class="fltrow"> 
       <td class="date-width"> 
        <input type="text" id="flt0_htmlTabela" ct="0" class="flt"> 
       </td> 
       <td class="time-width"> 
        <input type="text" id="flt1_htmlTabela" ct="1" class="flt"> 
       </td> 
       <td class="alarm-width"> 
        <input type="text" id="flt2_htmlTabela" ct="2" class="flt"> 
       </td> 
       <td class="priority-width"> 
        <input type="text" id="flt3_htmlTabela" ct="3" class="flt"> 
       </td> 
       <td class="stName-width"> 
        <input type="text" id="flt4_htmlTabela" ct="4" class="flt"> 
       </td> 
       <td class="ptName-width"> 
        <input type="text" id="flt5_htmlTabela" ct="5" class="flt"> 
       </td> 
       <td class="desc-width"> 
        <input type="text" id="flt6_htmlTabela" ct="6" class="flt"> 
       </td> 
       <td class="zone-width"> 
        <input type="text" id="flt7_htmlTabela" ct="7" class="flt"> 
       </td> 
      </tr> 
      <tr> 
       <th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable date-width" id="header-date" table-sortable="ignorecase">Date</th> 
       <th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable time-width" id="cell-time" table-sortable="ignorecase">Time</th> 
       <th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable alarm-width" id="cell-alarm" table-sortable="ignorecase">Alarm</th> 
       <th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable priority-width" id="cell-priority" table-sortable="ignorecase">Priority</th> 
       <th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class=" stName-width header-clickable" id="cell-stationName" table-sortable="ignorecase">StationName</th> 
       <th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable ptName-width" id="cell-pointName" table-sortable="ignorecase">PointName</th> 
       <th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable desc-width" id="cell-description" table-sortable="ignorecase">Description</th> 
       <th align="center" style="color:White;background-color:#9E3232;border-color:White;border-width:0px;border-style:Solid;height:17px;" class="header-clickable zone-width" id="cell-zname" table-sortable="ignorecase">Zone Name</th> 
      </tr> 
      <tr> 
       <th class="fltHolder" id="fltHolder0"> </th> 
       <th class="fltHolder" id="fltHolder1"> </th> 
       <th class="fltHolder" id="fltHolder2"> </th> 
       <th class="fltHolder" id="fltHolder3"> </th> 
       <th class="fltHolder" id="fltHolder4"> </th> 
       <th class="fltHolder" id="fltHolder5"> </th> 
       <th class="fltHolder" id="fltHolder6"> </th> 
      </tr> 
     </thead> 
     <tbody class="scrollContent" style="height: 150.5px;"> 
      <tr style="color:Gold;"> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="date-width">13&nbsp;Sep&nbsp;2013</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="time-width">15:05:15.947000</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="alarm-width">*</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="priority-width">3</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="stName-width">SYS$</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="ptName-width">SCADA</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="desc-width">OmsLinesections&nbsp;&nbsp;file&nbsp;80&nbsp;percent&nbsp;full</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="zone-width" id="cell-zname">AllZones</td> 
      </tr> 
      <tr style="color:Gold;"> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="date-width">12&nbsp;Sep&nbsp;2013</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="time-width">17:12:15.080000</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="alarm-width">*</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;text-align:center;" class="priority-width">3</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="stName-width">SYS$</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="ptName-width">SCADA</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="desc-width">OmsLinesections&nbsp;&nbsp;file&nbsp;80&nbsp;percent&nbsp;full</td> 
       <td style="border-color:Gray;border-width:1px;border-style:Solid;height:17px;" class="zone-width" id="cell-zname">AllZones</td> 
      </tr> 
     </tbody> 
     <tfoot> 
     </tfoot> 
    </table> 
</div>

источник

2013-09-26 Timmy

Вы прикрепили рабочий пример. Что вы хотите? – raam86

@ raam86 Строки тела не соответствуют столбцам заголовка. Но Тимми, это случается даже с несколькими строками – Itay

Вы устанавливаете 'display: block' как минимум дважды, что вы ожидаете от браузеров? Также 'align = center' устарел много. Удалите это. – FelipeAls

Вы должны поместить tbody.scrollContent >tr { width:100%; display:table; } в вашем CSS

источник

2013-09-26 11:38:18

Если вы нормально с ниже результата, то просто удалить все display:block ..

enter image description here

источник

2013-09-26 10:07:42 Sasidharan

Есть так много бесполезной C классы и рядной укладку вам просто необходимо начать с основным тестом и работать в направлении вашей цели.

Вот ваш стол, очищенный по большей части. BTW оранжевый трудно читать без темного background-color.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Table</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
.width_100 {width: 100%;} 
table tfoot, table thead {background-color: #9E3232;} 
table {border-collapse: collapse;} 
table tbody td {background-color: #bbb; color: #ffd700;} 
/*]]>*/ 
</style> 
</head> 

<body> 

<table class="width_100"> 
<thead> 
<tr><th>Date</th><th>Time</th><th>Alarm</th><th>Priority</th><th>StationName</th><th>PointName</th><th>Description</th><th>Zone Name</th></tr> 
</thead> 
<tbody> 
<tr><td>13&nbsp;Sep&nbsp;2013</td><td>15:05:15.947000</td><td>*</td><td>3</td><td>SCADA</td><td>OmsLinesections&nbsp;&nbsp;file&nbsp;80&nbsp;percent&nbsp;full</td><td>AllZones</td></tr> 
<tr><td>12&nbsp;Sep&nbsp;2013</td><td>17:12:15.080000</td><td>*</td><td>3</td><td>SYS$</td><td>SCADA</td><td>OmsLinesections&nbsp;&nbsp;file&nbsp;80&nbsp;percent&nbsp;full</td><td>AllZones</td></tr> 
</tbody> 
<tfoot><tr><th>Date</th><th>Time</th><th>Alarm</th><th>Priority</th><th>StationName</th><th>PointName</th><th>Description</th><th>Zone Name</th></tr></tfoot> 
</table> 

</body> 
</html>

источник

2013-09-26 10:14:06 John

браузеры добавить TBODY тег, если он не в вашем коде. - Это работает для меня, чтобы сделать Лобов продлить полностью в таблице:

tbody { display:table;width:100% }

источник

2017-01-31 16:09:02

Почему TD не расширяется, как ожидалось?

ответ

Смежные вопросы