logo标签列表

HTML混合行跨度的表格

htmlhtml-table
3
我试图使用HTML构建一个三行（1-3）三列（A-C）的表格，形成九个“虚拟单元格”（A1、B1、C1、A2、B2、C2、A3、B3、C3），并应用行跨度，使得：
  • 单元格A1跨越三行（覆盖A2和A3）
  • 单元格C1跨越两行（覆盖C2）
  • 单元格B2跨越两行（覆盖B3）
这是我想要看到的内容：

预期

这是我认为可以实现这一目标的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>

但这给了我：

实际效果

如何正确地获取我想要的？还是不可能？

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

这是一个重复的问题，链接为http://stackoverflow.com/questions/42087795/align-table-using-rowspan-and-colspan#，只不过使用rowspan而不是colspan。 - Constantin Groß
@Connum 这不是那个的副本（doublicate）... - CoderPi
这只是为了另一种表格布局而已。我已经发布了完全相同的解决方案，只是针对您的布局进行了调整，作为答案。 - Constantin Groß
6个回答
2
为了防止行折叠而不需要额外的标记，您可以将一个幻影单元格附加到每个行上，使用tr::after设置为display: table-cell，并在顶部和底部设置单元格填充以及一个Unicode空格：
tr::after {
  content: '\00a0';
  display: table-cell;
  padding: 1em 0;
}

给您正确的结果： Example 值得注意的是，幻影单元格会在右侧留下一些间隙，如下所示： Gap example 完整代码片段： 

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  padding: 1em;
  vertical-align: top;
}

tr:after {
  content: '\00a0';
  display: table-cell;
  padding: 1em 0;
}
<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>

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>

...但我建议使用另一种结构代替表格，因为除了列之外，它与表格没有太多共同点。

我需要使用表格。这是为了技术文档，而不仅仅是为了布局。 - Mårten Wikström
1

以下是一种解决方案，无需预先知道表格高度，使用隐藏表格单元格，就像使用rowspan和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>

我真的必须添加隐藏单元格才能使其工作吗？这是技术文档的要求，不仅仅是为了布局。对于技术撰写人员来说，添加隐藏单元格确实很尴尬。 - Mårten Wikström
已经有其他方法的答案了，你可以选择最适合你的方法——需要知道表格高度或使用隐藏单元格。遗憾的是，在HTML表格中没有其他方式可以实现你想要的跨度。 - Constantin Groß
谢谢确认。知道这一点非常好。对我来说却非常惊讶。:-( - Mårten Wikström
1

为什么不直接给 tr 设置一个 height 呢？因为它是表格，如果行内有更多的内容，高度会自动调整。

就像这样：

table {
  border-collapse: collapse;
}

tr {
  height: 30px;
}

td {
  border: 1px solid black;
  padding: 1em;
  vertical-align: top;
}
<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>

我无法设置显式高度，因为当单元格包含更多文本时，这会破坏布局。 - Mårten Wikström
@MårtenWikström 不确定你的意思。你想要它溢出隐藏吗？你试过了吗？对我来说，这很好用，看这里：https://jsfiddle.net/nfn898o6/ - caramba
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>
但是这样C1是否完全覆盖第二行就不清楚了。 - Mårten Wikström
@MårtenWikström，我想不仅仅是我这样认为。看看高度的调整。整个表格都已经被调整了。请注意高度不是3个单位而是2.5个单位。我写这段代码时没有使用显式高度属性。 - beachgreatsquaremoon
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>
设置显式高度对我来说不是一个选项。 - Mårten Wikström
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接