Question

经过一些测试后，我发现Chrome不会像Opera那样根据TBODY元素计算THEAD列宽。有没有办法避免在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>

Answer 1

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

HTML表：THEAD宽度取决于Chrome中的TBODY

1 个答案: