表行的宽度不同

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>

Answer 2

set character_set_client = utf8; set character_set_server = utf8;