我试图使用HTML来构建一个包含三行(1-3)和三列(A-C)的表,形成九个"虚拟单元" (A1,B1,C1,A2,B2,C2,A3,B3,C3)并应用行跨越以便:
这就是我想要看到的:
这是我认为会给我的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;
但这给了我:
获得我想要的正确方法是什么?或者是不可能的?
这适用于技术文档。这不是布局问题,内容在语义上是一个表。
答案 0 :(得分:2)
为了防止行折叠而不需要额外的标记,您可以将幻像单元附加到tr::after
设置为display: table-cell
的每一行,顶部和底部的单元格填充为unicode空白:
tr::after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
给你正确的结果:
值得注意的是,幻影单元会像这样在右边产生一点间隙:
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;
答案 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">‌</td></tr>
<tr><td rowspan="2">B2</td><td class="hidden">‌</td></tr>
<tr><td>C3</td><td class="hidden">‌</td></tr>
</table>
</body>
</html>
答案 3 :(得分:1)
为什么不将height
设置为tr
,因为如果行内有更多内容,那么它就是一个高度将会调整的表格。
类似的事情:
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;
答案 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>