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，以防止自动换行。

我做了一个小提琴： 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;
}

表传播剩余空间

1 个答案: