为什么TD没有按预期扩展？
我们有一个奇怪的情况，在100％的html表和可滚动的TBODY 也是100％宽度，它不会扩展我们想要的方式，只有当我们有少量行时（所以我们不需要滚动）。
注意：使用％。对我来说非常重要。
我有相同的类应用于所有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 Sep 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 file 80 percent 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 Sep 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 file 80 percent 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>
4 个答案:
答案 0 :(得分：1)
如果你对以下结果没问题，那么只需删除所有display:block ..
答案 1 :(得分：0)
有许多无用的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 Sep 2013</td><td>15:05:15.947000</td><td>*</td><td>3</td><td>SCADA</td><td>OmsLinesections file 80 percent full</td><td>AllZones</td></tr>
<tr><td>12 Sep 2013</td><td>17:12:15.080000</td><td>*</td><td>3</td><td>SYS$</td><td>SCADA</td><td>OmsLinesections file 80 percent 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>
答案 2 :(得分：0)
你应该放tbody.scrollContent >tr
{
width:100%;
display:table;
}
在你的CSS中
答案 3 :(得分：0)
浏览器会添加tbody标记（如果它不在您的代码中）。 - 这对我来说是有效的，可以在表格中完整地扩展tds：
tbody { display:table;width:100% }
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？