Question

这听起来与以前的问题非常相似，但是我找不到与我在这里尝试的东西相符的东西。

我当前的代码（非常详细，包含所有内容）如下所示：

＆＃13;

td { border: 1px solid black }

＆＃13;

<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>

＆＃13;

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

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

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

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

我也意识到使用表格可能不是一个好主意，现在我们可以使用CSS，但是我希望在将这个示例用于表格之前进行翻译＆＃39;它

我非常反对使用JavaScript来解决此问题，以备记录！

编辑：我也试过把所有＆＃39;子列＆＃39;在一行中，并将文本设置为一次三个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元素也没有正确关闭，也可以。

使用固定布局表

1 个答案: