html - 为什么TD没有像预期的那样扩张？

Question

我们有一个奇怪的情况，在 100% 的 html 表和 100% 宽度的可滚动 TBODY 中，它不会扩展我们想要的方式，只有在我们有少量行的情况下（所以我们不需要滚动）。

注意：与 % 一起工作对我来说非常重要。

我对所有 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>

Answer 1

如果您对以下结果没问题，那么只需删除所有display:block..

Answer 2

有很多无用的 CSS 类和内联样式，你应该从一个基本的测试用例开始，朝着你的目标努力。

这是你的桌子大部分都清理干净了。顺便说一句，如果没有较深的橙色，则很难阅读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>

Answer 3

你应该把tbody.scrollContent >tr { width:100%; display:table; } 你的CSS

Answer 4

如果 tbody 标签不在您的代码中，浏览器会添加它。- 这对我来说可以使 tds 在表格内完全扩展：

tbody { display:table;width:100% }