1

いくつかのテストの結果、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>
4

1 に答える 1

0

この問題は、<colgroup>要素を追加することで解決されます。Chromeは、最初の行（trまたはcolgroup）を使用してtd幅を決定します。このソリューションでは、古いバージョンのIEでいくつかの問題が発生します。これは、パーセンテージによるtd幅をサポートしていません。

于 2013-01-21T18:37:31.513 に答える