html - 调整表格单元格宽度

Question

让我们采用 4 个表列 - ID、Text、Date、Action。在我的情况下，表格始终具有恒定宽度 - 例如 960px。

如何创建这样的表:

*-*------------------------------------*----------*----*
|1| Some text...                       |May 2011  |Edit|
*-*------------------------------------*----------*----*
|2| Another text...                    |April 2011|Edit|
*-*------------------------------------*----------*----*

我们可以看到，ID、Date和Action根据内容调整宽度，Text是尽可能长....

是否可以在不设置特定列宽的情况下做到这一点？当 ID = 123 或 Date = 2011 年 11 月时，列应自动变宽...

Answer 1

在宽 td 上使用 100% 宽度并为表格使用固定宽度以及 white-space:nowrap，可以做到这一点:

Demo

HTML

<table>
    <tr>
        <td>1</td>
        <td width="100%">Some text... </td>
        <td>May 2011</td>
        <td>Edit</td>
    </tr>
    <tr>
        <td>2</td>
        <td width="100%">Another text... </td>
        <td>April 2011</td>
        <td>Edit</td>
    </tr>
</table>

CSS

table
{
    ...
    width:960px;
}

td
{
    ...
    white-space:nowrap;
}