html - 使用固定布局表格填充自动宽度表格单元格

Question

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

我当前的代码(非常冗长，所有内容都在一行中)如下所示:

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 来解决这个问题，郑重声明!

编辑:我还尝试将所有“子列”放在一行中，并将文本一次设置为 colspan 三个，然后应用 25%。这最终导致引擎困惑，宽度最终占页面的大约 75%。

Answer 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 元素也未正确关闭，请查看。