Question

大约一个月前，我问了一个关于表格的问题（Table overflows parent div when td content is too wide）。我得到了一个似乎完美无缺的答案。昨天我想再次设计表格，但注意到我无法改变td的宽度。

我想要什么：

我希望标题既不包装也不显示溢出。一个月前的答案解决了这个问题。
我还希望黄色td宽20％，而不是50％。

我还没有找到答案，因为第一个或第二个问题都解决了，而不是两个都解决了。这是一个jsFiddle，只需添加/删除评论即可查看这两个问题：

table {
    width: 90%;
    border: 1px solid black;
    /*table-layout:fixed;*/    1. Problem (Header wraps)
    table-layout:fixed;        2. Problem (td-width != 20%)
}

.header {
    overflow:hidden;
    /*white-space: nowrap;*/   1. Problem (Header wraps)
    white-space: nowrap;       2. Problem (td-width != 20%)
}

我如何一次解决这两个问题？

Answer 1

您的问题是在具有固定布局的表格中column width is dictated by the first row。

您可以在第一行中创建2个虚拟单元格，然后将标题向下移动到自己的行中。您还需要将.red列跨度为3行，以考虑此额外行：

<div>
  <table>
    <tr>
        <td class="red" rowspan="3">RED</td>
        <td class="dummy-green"></td>
        <td class="dummy-yellow"></td>
    </tr>
    <tr>
        <td class="header" colspan="2">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</td>
    </tr>
    <tr>
        <td class="green">GREEN</td>
        <td class="yellow">YELLOW</td>
    </tr>
  </table>
</div>

使虚拟黄色元素的宽度为20％：

.dummy-yellow {
  width: 20%; 
}

将table-layout: fixed;和white-space:nowrap保留原位。

我可以通过此方法看到的唯一问题是它会在标题上方创建一个2px（不可见）行。

请参阅demo

样式表 - 表格布局：固定与宽度：20％

1 个答案: