本文介绍了HTML表格：THEAD宽度取决于Chrome中的TBODY的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
经过一些测试后，我发现Chrome不会根据TBODY元素计算THEAD列宽，就像Opera一样。有没有办法避免在thead中指定这个？示例：
After some testing i've found that Chrome doesn't calculate the THEAD column width depending on the TBODY elements, as Opera does. Is there a way to avoid specifying this in the thead? Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
table{
width:800px;
border:1px solid #CCCCCC;
table-layout: fixed;
border-spacing:0px;
box-sizing: border-box;
}
table td.option{
width:100px;
}
table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:1px solid #EEEEEE;
}
table td.active{
text-align:center;
width:100px;
}
td.thead{
/* something that makes that width: is depending on the total width of the tbody elements */
}
table td.nonfixed{
width:100%;
}
</style>
<title>Untitled</title>
</head>
<body>
<table>
<thead>
<tr>
<td class="thead">Name</td>
<td class="thead">Description</td>
<td class="thead">Active</td>
<td class="thead" colspan="2">Options</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="100"><a href="">+ Add new row</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="nonfixed">[Name 1]</td>
<td class="nonfixed">[Description 1]</td>
<td class="active">[X]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
<tr>
<td class="nonfixed">[Name 2]</td>
<td class="nonfixed">[Description 2]</td>
<td class="active">[0]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
</tbody>
</table>
</body>
</html>
推荐答案
问题可以通过添加< colgroup> 元素。 Chrome使用第一行（tr或colgroup）确定td宽度。此解决方案在旧版本的IE中遇到一些问题，不支持带宽百分比的td width。
The problem is solved with adding an <colgroup> element. Chrome uses the first row (tr or colgroup) to determine the td width. This solution encounters some problems in older versions of IE, that doesn't support td width with percentages.
这篇关于HTML表格：THEAD宽度取决于Chrome中的TBODY的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！