HTML table with mixed rowspan
Question
I'm trying to use HTML to construct a table with three rows (1-3) and three columns (AC) forming nine "virtual cells" (A1, B1, C1, A2, B2, C2, A3, B3, C3) and apply row spanning so that:
- cell A1 span all three rows (covering A2 and A3)
- cell C1 span two rows (covering C2)
- cell B2 span two rows (covering B3)
This is what I want to see:
This is the HTML I thought would give me that:
<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>
But that gives me:
What is the correct way to get what I want? Or is it not possible?
This is for use in technical documentation. It is not a layout issue, the content is semantically a table.
6 answers
solution1
2 ACCPTED 2017-02-24 14:36:54
In order to prevent the rows collapsing without the need for additional markup, you can attach a phantom cell to each row with tr::after set to display: table-cell with your cell padding on top and bottom and a unicode blank space:
tr::after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
Gives you the correct result:
It's worth noting that the phantom cell will create a slight gap to the right like this:
Full snippet
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>
solution2
1 2017-02-24 13:58:37
You could hack it like this:
<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>
... but I would recommend to use another structure instead of tables, since it doesn't have a lot in common with table, besides the columns.
solution3
1 2017-02-24 14:04:58
Here's a solution without having to know the table height up front, using hidden table cells, like in Align table using rowspan and colspan (as I said, it's basically a duplicate, just another layout):
<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>
solution4
1 2017-02-24 14:10:25
Why not just setting a height to the tr cause it is a table the height will adjust anyways if there is more content inside the row.
something like so:
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>
solution5
1 2017-02-24 15:05:41
Otherwise,
<!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>
solution6
0 2017-02-24 14:00:22
It's depend the height of your table.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.