Question

我有一个3列表，主要内容显示在中间内容中所有三列的宽度都是灵活的，但中间列的宽度必须优先有没有办法做到这一点？

Answer 1

<table>
    <tr>
        <td id="left">Some content</td>
        <td id="center">Center content</td>
        <td id="right">Right content</td>
    </tr>
    <tr>
        <td style="white-space: nowrap">Some content</td>
        <td style="width:90%">Center content</td>
        <td style="white-space: nowrap">Right content</td>
    </tr>
</table>

这似乎对我有用。它不使用包裹来强制小柱扩展超过每列给定的5％，并将剩余的空间提供给中间列。

Answer 2

这看起来相对简单，所以我可能会遗漏一些东西，但是给出了以下html：

HTML：

<table>
    <tr>
        <td id="left">Some content</td>
        <td id="center">Center content</td>
        <td id="right">Right content</td>
    </tr>
    <tr>
        <td>Some content</td>
        <td>Center content</td>
        <td>Right content</td>
    </tr>
</table>

和css：

table {
    border-collapse: collapse;
    width: 90%;
    border: 1px solid #ccc;
}

#center {
    width: 70%;
}

这项工作的关键是width本身定义的table，然后是td的{{1}}（并且表格对所有小区应用一致的宽度）在同一“列”中，以及同一“行”中单元格的高度，除非id="center"或colspan强制执行不同的行为）。 JS Fiddle demo at: http://jsfiddle.net/davidThomas/hJZ6Q/

“列”（由rowspan和#left定义）没有明确的宽度，这会导致浏览器为两者分配相等的宽度，在这种情况下约为15％桌子的宽度。当然，您可以为“列”指定所需单位的宽度，只要总数符合#right本身的指定宽度（因为负数对于表格宽度无效，并且分配）这样的数字会导致浏览器忽略宽度，只需使用剩余的有效宽度）。

Answer 3

我建议你看看Perfect 3 Column Layout 它是一种流畅的布局，听起来就像你正在寻找的那样。

带有主列的三列HTML表格布局

3 个答案:

HTML：

和css：