1

你如何分配表格列的剩余空间？就像我想要一个包含以下列的表：

  • 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）部署到标题和内容的列？

4

1 回答 1

1

将小列设置width为1px（0不起作用）。内容会拉伸它，但会尽可能小。

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

要将“编辑”和“删除”保持在同一行，请使用容器div或span设置white-space: nowrap来防止自动换行。

我做了一个小提琴：http: //jsfiddle.net/RSsNS/

HTML：

<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;
}
于 2013-03-29T22:02:05.107 回答