用固定布局的表格填充自动宽度的表格单元格答案

【问题标题】：Filling an automatic-width table cell with a fixed-layout table用固定布局的表格填充自动宽度的表格单元格
【发布时间】：2017-07-15 14:12:31
【问题描述】：

这听起来与之前的问题非常相似，但我没有找到与我在这里尝试做的事情相匹配的内容。

我当前的代码（所有内容都非常冗长）如下所示：

td { border: 1px solid black }

<table style="table-layout:fixed">
  <tr>
    <td>
      <table style="table-layout:fixed">
        <tr>
          <td style="background-color:red"></td>
          <td style="background-color:limegreen;width:30px"></td>
          <td style="background-color:blue"></td>
        <tr>
      </table>
    </td>
    <td>
      <table style="table-layout:fixed">
        <tr>
          <td style="background-color:red"></td>
          <td style="background-color:limegreen;width:30px"></td>
          <td style="background-color:blue"></td>
        <tr>
      </table>
    </td>
    <td>
      <table style="table-layout:fixed">
        <tr>
          <td style="background-color:red"></td>
          <td style="background-color:limegreen;width:30px"></td>
          <td style="background-color:blue"></td>
        <tr>
      </table>
    </td>
    <td>
      <table style="table-layout:fixed">
        <tr>
          <td style="background-color:red"></td>
          <td style="background-color:limegreen;width:30px"></td>
          <td style="background-color:blue"></td>
        <tr>
      </table>
    </td>
  </tr>
  <tr>
    <td style="width:25%;text-align:center">Some text here</td>
    <td style="width:25%;text-align:center">More text</td>
    <td style="width:25%;text-align:center">Hi</td>
    <td style="width:25%;text-align:center">Somewhat longer text</td>
  </tr>
</table>

我想要完成的应该是这样的：

也就是说，四个主要列应该都是相同的宽度，这是任何列中最大内容的宽度。

绿色列应始终为 30 像素，红色和蓝色列应填充中间列每一侧的剩余空间，仅达到自动调整大小的外列中可用的宽度。

将内部表格设置为 100% 宽度会发生这种情况，但外部表格当然会占据整个页面宽度。

我也知道，现在我们可以使用 CSS，为此使用表格可能不是一个好主意，但我希望在“翻译”之前让这个示例在表格中工作。

我非常反对使用 JavaScript 来解决这个问题，记录在案！

编辑：我还尝试将所有“子列”放在一行中，并将文本一次设置为三个跨度，然后应用 25%。这最终使引擎感到困惑，宽度最终占页面的 75% 左右。

【问题讨论】：

你可以只在每边放 50px 并解决它，但是什么时候没有更多的空间 30px 会比那个少
顺便说一句，如果您设置相等的百分比，则不需要使用表格布局
@KennyAmaro 正如我所提到的，宽度并不总是那么大。
@KennyAmaro R.e.你的第二条评论，我使用一个固定的表格来保持固定的百分比宽度而不跨越整个页面。绝对愿意接受有关替代品的建议，特别是如果它们产生了预期的结果。
你弄明白了吗？请注意，没有明确大小的 table-layout:fixed 与 table-layout:auto 相同，至少在 chrome 中是这样。

标签： html css layout html-table

【解决方案1】：

<table style="table-layout:fixed" border="1">

<tr style="font-size: 1px;">
    <td width="25%" colspan="3">&nbsp;</td>
    <td width="25%" colspan="3">&nbsp;</td>
    <td width="25%" colspan="3">&nbsp;</td>
    <td width="25%" colspan="3">&nbsp;</td>
</tr> 
<tr style="font-size: 6px;">
    <td style="background-color:red">&nbsp;</td>
    <td style="background-color:green"><div style="width: 30px;"> &nbsp;</div></td>
    <td style="background-color:blue">&nbsp;</td>

            <td style="background-color:red">&nbsp;</td>
    <td style="background-color:green"><div style="width: 30px;"> &nbsp;</div></td>
    <td style="background-color:blue">&nbsp;</td>


            <td style="background-color:red">&nbsp;</td>
    <td style="background-color:green"><div style="width: 30px;"> &nbsp;</div></td>
    <td style="background-color:blue">&nbsp;</td>

            <td style="background-color:red">&nbsp;</td>
    <td style="background-color:green"><div style="width: 30px;"> &nbsp;</div></td>
    <td style="background-color:blue">&nbsp;</td>

</tr>
  <tr>
    <td colspan="3" style="text-align:center">Some text here</td>
    <td colspan="3"  style="text-align:center">More text</td>
    <td colspan="3" style="text-align:center">Hi</td>
    <td colspan="3" style="text-align:center">Somewhat longer text</td>
  </tr>
</table>

这可能会解决您的答案，您之前的代码 html 元素也没有正确关闭。

【讨论】：

这并没有像问题中描述的那样给出任何结果，并在上面添加了另一行。