html - 表格行的不同宽度

Question

我尝试拆分中间行并保持上行和底部不变。

<table border="1" width="500">
    <tbody>
        <tr bgcolor="red">
            <td width="10%">&nbsp;</td>
            <td width="80%">&nbsp;</td>
            <td width="10%">&nbsp;</td>
        </tr>
        <tr bgcolor="green">
            <td width="50%" colspan="2">&nbsp;</td>
            <td width="50%">&nbsp;</td>
        </tr>
        <tr bgcolor="blue">
            <td colspan="3">&nbsp;</td>
        </tr>
    </tbody>
</table>                                         

如何使用一个表格标签将中间行分成两列？

Answer 1

添加更多colspan:

table {
  width: 500px;
  table-layout: fixed;
  border: 1px outset;
}
tr:nth-child(1) > td:nth-child(2) {
  width: 80%;
}
td::after {
  content: '\200B'; /* Insert zero-width space */
}
table { border: 1px outset; }
td    { border: 1px inset;  }
tr:nth-child(1) { background: red;   }
tr:nth-child(2) { background: green; }
tr:nth-child(3) { background: blue;  }

<table>
  <tbody>
    <tr>
      <td></td>
      <td colspan="2"></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td colspan="4"></td>
    </tr>
  </tbody>
</table>