HTML表格：THEAD宽度取决于铬TBODY(HTML Table: THEAD width de

2019-10-17 15:04发布

一些测试后我发现，Chrome不计算取决于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>

问题解决与添加<colgroup>元素。铬使用第一行（tr或COLGROUP）确定TD宽度。该解决方案在遇到老版本的IE浏览器，不支持TD宽度与百分比的一些问题。