具有混合行数的HTML表

时间:2017-02-24 13:49:38

标签: html html-table

我试图使用HTML来构建一个包含三行(1-3)和三列(A-C)的表,形成九个"虚拟单元" (A1,B1,C1,A2,B2,C2,A3,B3,C3)并应用行跨越以便:

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

这就是我想要看到的:

Expected

这是我认为会给我的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>C3</td></tr>
	</table>
  </body>
</html>
&#13;
&#13;
&#13;

但这给了我:

Actual

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

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

6 个答案:

答案 0 :(得分:2)

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

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

给你正确的结果:

Example

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

Gap example

完整代码段

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

你可以像这样破解它:

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

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

答案 2 :(得分:1)

这是一个解决方案,无需事先知道桌面高度,使用隐藏的表格单元格,如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>

答案 3 :(得分:1)

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

类似的事情:

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:1)

否则,

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

答案 5 :(得分:0)

它取决于你桌子的高度。

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>