样式表 - 表格布局：固定与 td-width：20%答案

【问题标题】：Styling Tables - table-layout:fixed vs td-width:20%样式表 - 表格布局：固定与 td-width：20%
【发布时间】：2014-11-10 18:32:45
【问题描述】：

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

我想要什么：

我希望标题既不换行也不显示溢出。一个月前的回答解决了这个问题。
我还希望黄色 td 宽度为 20%，而不是 50%。

我还没有找到答案，因为第一个或第二个问题都已解决，永远不会同时解决。这是jsFiddle，只需添加/删除 cmets 即可查看这两个问题：

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%)
}

如何同时解决这两个问题？

【问题讨论】：

这可能是最糟糕的修复方法，但您可以将绿色设置为跨越 8 列，将黄色设置为跨越 2 列。文本应跨越 10 列超过。因为绿色跨越 8，即 80%，黄色跨越 2，即 20%。当然，这可以用于快速而肮脏的修复，但是如果我这样做的话，我想不出其他方法。我一定会在这里发表评论。
你说的不换行是什么意思。你想把所有东西都放在一条线上吗？
@KristoferAronSverrisson 谢谢你的回答，它似乎真的有效。目前我不确定它是否适用于我的程序中的所有情况，但它看起来很有希望。
@LcSalazar 是的，即使部分文本会被隐藏。
@KristoferAronSverrisson 我刚刚和我的一个朋友谈过：绿色的 td 不应该总是 80% 宽。在某些情况下，它取决于具有已知宽度（以 px 为单位）的内容（图像）。我们可以通过使用 JS（将图像宽度计算为 tr 的百分比）使其工作，但这确实是一个糟糕的方法。

标签： css width overflow css-tables

【解决方案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

【讨论】：

非常感谢，特别是链接，我以前不知道。与第一个评论者类似，您建议解决 td-width 问题。您是否知道在不使用 table-layout:fixed 的情况下实现正确标题行为（不换行、隐藏溢出）的方法？我想，这将解决我的问题而无需解决方法。
由于表格的工作方式，我认为这是不可能的。请记住，表格不适合布局。