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

时间:2013-05-01 18:31:27

标签: html css css3 tablelayout html-table

我有一个<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 */
}

1 个答案:

答案 0 :(得分:0)

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

例如:

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