调整表格单元格宽度

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

使用100%宽td的宽度和桌子的固定宽度white-space:nowrap,可以这样做:

演示

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

Answer 2

基本上，就像这样：http : //jsfiddle.net/49W5A/-您必须将像元宽度设置为较小的值（例如1px），以使其尽可能地小。

但正如您将看到的，日期字段进行换行有一个问题。为防止这种情况，只需white-space: nowrap;为您的文本字段添加：http : //jsfiddle.net/ZXu7U/

工作示例：

<style type="text/css">
.table{
    width:500px;
    border: 1px solid #ccc;
}
.table td{
    border: 1px solid #ccc;
}
.id, .date, .action{
    width:1px;
}
.date{
    white-space: nowrap;
}
</style>
<table class="table">
    <tr>
        <td class="id">1</td>
        <td class="text">Some Text...</td>
        <td class="date">May 2011</td>
        <td class="action">Edit</td>
    </tr>
    <tr>
        <td class="id">2</td>
        <td class="text">Another Text...</td>
        <td class="date">April 2011</td>
        <td class="action">Edit</td>
    </tr>
</table>