HTML Table: THEAD width depending on TBODY in Chrome

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/14444436/html-table-thead-width-depending-on-tbody-in-chrome

标签

html

css

html-table

cross-browser

width