css - 样式表 - 表布局 :fixed vs td-width:20%

Question

大约一个月前，我问了一个关于表格的问题(Table overflows parent div when td content is too wide)。我得到了一个似乎完美的答案。昨天我想重新设计表格，但发现我无法更改 td 的宽度。

我想要什么:

1. 我希望 header 既不换行也不显示溢出。一个月前的答案解决了这个问题。
2. 我还希望黄色 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