调整表格单元格的宽度 [英] Adjusting table cell width

问题描述

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

Let's take 4 table columns - ID, Text, Date, Action. In my case table have always constant width - in example 960px.

如何创建如下表:

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

我们可以看到ID，Date和Action调整其宽度以适应内容，Text尽可能长....

As we can see, ID, Date and Action adjust their width to content, Text is as long as possible....

是否可以不设置列的特定宽度而做?当ID = 123或Date = 2011年11月时，列应自动变宽...

Is that possible to do without setting specific width of columns ? When ID = 123 or Date = November 2011, columns should automatically be wider...

推荐答案

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

Using a 100% width on the wide td and a fixed width for the table along with white-space:nowrap, this can be done:

<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;
}

这篇关于调整表格单元格的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！