Question

我有两个表，每个表有两列 - 每个tr两个td元素。假设第一个表的最后一个tr只有一个td元素，那么最后会有一个空格。您可以使用colspan="2"解决此问题。但是，目标是让下一个表的第一个单元格与第一个表的最后一个单元格一致。

使用代码段说明它：我希望表2，单元格1 与表1，单元格 在同一行

#container{
  width: 160px;
  background-color: orange;
  color: blue;
  zoom: 3.5; /* better visibility */
}

td{
  border: 1px solid black;
  width: 80px;
  overflow: hidden;
}

#table-2{
  color: green;
}

<div id="container">
  <table id="table-1">
    <tr>
      <td>Table 1, Cell 1</td>
      <td>Table 1, Cell 2</td>
    </tr>
    <tr>
      <td>Table 1, Cell 3</td>
    </tr>
  </table>
  
  <table id="table-2">
    <tr>
      <td>Table 2, Cell 1</td>
      <td>Table 2, Cell 2</td>
    </tr>
  </table>
</div>

Answer 1

假设您确实需要两个表，如果将表2，单元格1移动到表1中，则它不再是表2的一部分。

你要问的唯一方法就是：

手动将表2，单元格1放在HTML中的表1中（并从那里继续模式;您决定是否真的需要两个表或jus tone大表），或
< / LI>
使用服务器端框架（例如MVC，MVVM，PHP，JSP等）动态生成表，以确保每列都被填充，无论其所在的表是什么。
< / LI>

将拐角处的表格单元格包含在同一行上，表格行包含来自另一个表格的不均匀单元格

1 个答案: