表展剩馀空间

Question

你是如何把桌子的剩余空间摊开的？就像我希望有一个具有以下列的表一样：

• id:应该尽可能小(宽度)，因为我不想要太多的空白
• 标题:应该占用尽可能多的空间
• 内容:应该占用尽可能多的空间
• 操作：(编辑删除)应尽可能小

这里是我想要做的事情的脚手架：

| <--------------------------------- MAX WIDTH ---------------------------------> |

| id |            title            |            content            |    action    | < this is what i want
+----+-----------------------------+-------------------------------+--------------+
| 23 | test1                       | 123080asdu0a                  | edit  delete |
| 32 | test2                       | 123080asdu0a                  | edit  delete |
...

如何将剩余的空间(100% -id的宽度-动作的宽度除以2)部署到标题和内容的col？

Answer 1

将小列的width设置为1px (0不工作)。内容将扩展这一点，但将尽可能小。

将大型列的width设置为50%。这将使它们具有相同的宽度(除非其中一个文本比另一个文本多，并且需要更多的空间)。

若要将“编辑”和“删除”保留在同一行，请使用容器div或span并设置white-space: nowrap，这将阻止单词包装。

我做了一个Fiddle：http://jsfiddle.net/RSsNS/

<table>
    <tr>
        <td class="small">ID</td>
        <td class="big">Title</td>
        <td class="big">Content</td>
        <td class="small">Action</td>
    </tr>
    <tr>
        <td class="small">23</td>
        <td class="big">Test 1</td>
        <td class="big">123080asdu0a</td>
        <td class="small">
            <div>
                edit delete
            </div>
        </td>
    </tr>
    <tr>
        <td class="small">32</td>
        <td class="big">Test 2</td>
        <td class="big">123080asdu0a</td>
        <td class="small">
            <div>
                edit delete
            </div>
        </td>
    </tr>
</table>

CSS

table {
    width: 400px;
    border: 1px dashed #AAA;
}
td {
    border: 1px solid #CCC;
}
.small {
    width: 1px;
}
.big {
    width: 50%;
}
td > div {
    white-space: nowrap;
}