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

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> 

我要完成的工作应如下所示：

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

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

将内部表设置为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元素也没有正确关闭。