Question

我有一个<table>，我希望其宽度包含其子<td>。

不幸的是，我只能将类分配到<td>列，而不是<th>列 - 所以我不能像往常那样使用table-layout: fixed。表格布局上的w3规范：http://www.w3.org/TR/CSS2/tables.html#width-layout

您知道如何使<table>宽度等于其子<td>吗？

HTML

<table>
    <thead>
        <tr>
            <th>
                First
            </th>
            <th>
                Last
            </th>
            <th>
                Info
            </th>
            <th>
                Join Date
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="first">
                Don
            </td>
            <td class="last">
                P
            </td>
            <td class="info">
                Here is some rando info that can vary in length. I talk a lot.
            </td>
            <td class="join-date">
                2013-03-01
            </td>
        </tr>
        <tr>
            <td class="first">
                Tom
            </td>
            <td class="last">
                Smith
            </td>
            <td class="info">
                I'm a quiet person.
            </td>
            <td class="join-date">
                2013-04-22
            </td>
        </tr>
    </tbody>
</table>

CSS

table {
    table-layout: fixed;
}

.first, .last, .join-date {
    width: 250px;
}

.info {
    min-width: 400px;
    width: 200%; /* so this column will expand */
}

Answer 1

如果内容已修复，请将手动宽度指定为第1个。然后，表格将根据您指定的宽度进行调整。

例如：

 <table>
      <tr>
         <td style="width:100px"></td>
      </tr>
 </table>

使``宽度等于其子项`<table> <tbody> <tr> <td>`</td> </tr> </tbody> </table>

1 个答案: