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

役に立たない 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 2

tbody.scrollContent >tr { width:100%; display:table; } あなたのcssに入れる必要があります