Question

我试图使用HTML来构建一个包含三行（1-3）和三列（A-C）的表，形成九个＆＃34;虚拟单元＆＃34; （A1，B1，C1，A2，B2，C2，A3，B3，C3）并应用行跨越以便：

单元格A1跨越所有三行（覆盖A2和A3）
单元格C1跨越两行（覆盖C2）
单元格B2跨越两行（覆盖B3）

这就是我想要看到的：

这是我认为会给我的HTML：

＆＃13;

<html>
  <head>
	<style>
	table { border-collapse: collapse; }
	td { border: 1px solid black; padding: 1em; vertical-align: top; }
	</style>
  </head>
  <body>
	<table>
	  <tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td></tr>
	  <tr><td rowspan="2">B2</td></tr>
	  <tr><td>C3</td></tr>
	</table>
  </body>
</html>

＆＃13;

但这给了我：

获得我想要的正确方法是什么？或者是不可能的？

这适用于技术文档。这不是布局问题，内容在语义上是一个表。

Answer 1

为了防止行折叠而不需要额外的标记，您可以将幻像单元附加到tr::after设置为display: table-cell的每一行，顶部和底部的单元格填充为unicode空白：

tr::after {
  content: '\00a0';
  display: table-cell;
  padding: 1em 0;
}

给你正确的结果：

值得注意的是，幻影单元会像这样在右边产生一点间隙：

完整代码段

＆＃13;

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 1em;
  vertical-align: top;
}

tr:after {
  content: '\00a0';
  display: table-cell;
  padding: 1em 0;
}

＆＃13;

<table>
  <tr>
    <td rowspan="3">A1</td>
    <td>B1</td>
    <td rowspan="2">C1</td>
  </tr>
  <tr>
    <td rowspan="2">B2</td>
  </tr>
  <tr>
    <td>C3</td>
  </tr>
</table>

＆＃13;

Answer 2

你可以像这样破解它：

<html>
  <head>
	<style>
	table { border-collapse: collapse; }
	td { border: 1px solid black; padding: 1em; vertical-align: top; }
	</style>
  </head>
  <body>
	<table>
	  <tr>
      <td style="width:0px;padding:0;border:0"></td>
      <td rowspan="3">A1</td>
      <td>B1</td>
      <td rowspan="2">C1</td>
    </tr>
	  <tr>
      <td style="width:0px;padding:0;border:0;height:50px"></td>
      <td rowspan="2">B2</td>
    </tr>
	  <tr>
     <td style="width:0px;padding:0;border:0"></td>
      <td>C3</td>
    </tr>
	</table>
  </body>
</html>

...但我建议使用另一种结构而不是表格，因为除了列之外，它与表格没有多少共同之处。

Answer 3

这是一个解决方案，无需事先知道桌面高度，使用隐藏的表格单元格，如Align table using rowspan and colspan（正如我所说，它基本上是重复的，只是另一种布局）：

<html>
  <head>
	<style>
	table { border-collapse: collapse; }
	td { border: 1px solid black; padding: 1em; vertical-align: top; }
  td.hidden { visibility: hidden; padding: 1em 0; border: 0 none; }
	</style>
  </head>
  <body>
	<table>
	  <tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td><td class="hidden">&zwnj;</td></tr>
	  <tr><td rowspan="2">B2</td><td class="hidden">&zwnj;</td></tr>
	  <tr><td>C3</td><td class="hidden">&zwnj;</td></tr>
	</table>
  </body>
</html>

Answer 4

为什么不将height设置为tr，因为如果行内有更多内容，那么它就是一个高度将会调整的表格。

类似的事情：

＆＃13;

table {
  border-collapse: collapse;
}

tr {
  height: 30px;
}

td {
  border: 1px solid black;
  padding: 1em;
  vertical-align: top;
}

＆＃13;

<table>
  <tr>
    <td rowspan="3">A1</td>
    <td>B1</td>
    <td rowspan="2">C1</td>
  </tr>
  <tr>
    <td rowspan="2">B2</td>
  </tr>
  <tr>
    <td>C3</td>
  </tr>
</table>

＆＃13;

Answer 5

否则，

<!DOCTYPE html>
<html>
  <head>
    <style>
      table { border-collapse: collapse; }
      td{border: 1px solid black; padding: 1em; vertical-align: top; }
  </style>
  </head>
  <body>
    <table>
     <tr>
       <td rowspan="3">A1</td>
       <td>B1</td>
       <td rowspan="2">C1</td>
     </tr>
     <tr>
       <td rowspan="2">B2</td>
     </tr>
     <tr>
       <td rowspan="2">C3</td>
     </tr>
   </table>
  </body>
</html>

Answer 6

它取决于你桌子的高度。

http://codepen.io/anon/pen/jBOgpx

<table>
  <tr>
    <td rowspan="3">A1</td>
    <td>B1</td>
    <td rowspan="2">C1</td>
  </tr>
  <tr>
    <td rowspan="2" style="height:65px">B2</td>
  </tr>
  <tr>
    <td>C3</td>
  </tr>
</table>

具有混合行数的HTML表

6 个答案:

完整代码段