HTML 表：THAD 宽度取决于 Chrome 中的 TBODY答案

【问题标题】：HTML Table: THEAD width depending on TBODY in ChromeHTML 表：THAD 宽度取决于 Chrome 中的 TBODY
【发布时间】：2013-01-04 20:23:51
【问题描述】：

经过一些测试，我发现 Chrome 不会像 Opera 那样根据 TBODY 元素计算 THEAD 列宽。有没有办法避免在标题中指定这个？示例：

<!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>

【问题讨论】：

标签： html css html-table cross-browser width

【解决方案1】：

通过添加<colgroup> 元素解决了这个问题。 Chrome 使用第一行（tr 或 colgroup）来确定 td 宽度。此解决方案在旧版 IE 中遇到一些问题，不支持带百分比的 td 宽度。

【讨论】：