如何使用表格行标题跨越多行？

Question

我正在尝试实现这种布局（附在屏幕截图中）。

我正在努力添加ROW TITLE并使“合并的 header 标题将 go 在这里并垂直居中”按照屏幕截图增长，我尝试使用 rowSpan / colSpan 实现这一点，但它打破了表格。

有人可以告诉我我做错了什么，或者请指出我的方向吗？ 这是我目前在沙盒中的工作：https://codesandbox.io/s/pedantic-river-6ypelb?file=/src/App.js

这是我当前实现的截图以供参考

 .wrapper { font-family: sans-serif; text-align: center; max-width: 100%; overflow-x: scroll; }.table-title { border: 1px solid black; padding-left: 20px; background-color: #eceeef; } table { width: 100%; } table thead tr:first-child th:not(:first-child) { padding: 10px; } table thead tr th { padding: 7px; } table tbody tr:nth-child(even) { background-color: #cfd7e5; } table tbody tr:nth-child(even) td:first-child { background-color: #fff; } table tbody tr td { padding: 10px; } table th, table td { border: 1px solid black; }

 <div> <div class="table-title"> <h2>Table title here</h2> </div> <table style="table-layout: auto;"> <colgroup></colgroup> <thead> <tr> <th rowspan="4"></th> <th colspan="3">Merged header title will go here and centred 1</th> <th colspan="3">Merged header title will go here and centred 2</th> </tr> <tr> <th>COLUMN TITLE 1</th> <th>COLUMN TITLE 2</th> <th>COLUMN TITLE 3</th> <th>COLUMN TITLE 4</th> <th>COLUMN TITLE 5</th> <th>COLUMN TITLE 6</th> </tr> </thead> <tbody> <tr> <td>Merged header title will go here and centred vertically</td> <td>1st January 2020</td> <td>1st January 2020</td> <td>1st January 2020</td> <td>1st January 2020</td> <td>1st January 2020</td> <td>1st January 2020</td> </tr> <tr> <td>Merged header title will go here and centred vertically</td> <td>8th January 2020</td> <td>8th January 2020</td> <td>8th January 2020</td> <td>8th January 2020</td> <td>8th January 2020</td> <td>8th January 2020</td> </tr> <tr> <td>Merged header title will go here and centred vertically</td> <td>12th January 2020</td> <td>12th January 2020</td> <td>12th January 2020</td> <td>12th January 2020</td> <td>12th January 2020</td> <td>12th January 2020</td> </tr> <tr> <td>Merged header title will go here and centred vertically</td> <td>21st January 2020</td> <td>21st January 2020</td> <td>21st January 2020</td> <td>21st January 2020</td> <td>21st January 2020</td> <td>21st January 2020</td> </tr> </tbody> </table> </div>

Answer 1

您只需使用rowspan ，但显然您还需要删除每隔一个标题。 然后，您将为“ROW TITLE”添加新单元格并展开空单元格的colspan 。

 .wrapper { font-family: sans-serif; text-align: center; max-width: 100%; overflow-x: scroll; }.table-title { border: 1px solid black; padding-left: 20px; background-color: #eceeef; } table { width: 100%; } table thead tr:first-child th:not(:first-child) { padding: 10px; } table thead tr th { padding: 7px; } table tbody tr:nth-child(even) { background-color: #cfd7e5; } table tbody tr:nth-child(even) td:first-child { background-color: #fff; } table tbody tr td { padding: 10px; } table th, table td { border: 1px solid black; }

 <div> <div class="table-title"> <h2>Table title here</h2> </div> <table style="table-layout: auto;"> <colgroup></colgroup> <thead> <tr> <th rowspan="4" colspan="2"></th> <th colspan="3">Merged header title will go here and centred 1</th> <th colspan="3">Merged header title will go here and centred 2</th> </tr> <tr> <th>COLUMN TITLE 1</th> <th>COLUMN TITLE 2</th> <th>COLUMN TITLE 3</th> <th>COLUMN TITLE 4</th> <th>COLUMN TITLE 5</th> <th>COLUMN TITLE 6</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Merged header title will go here and centred vertically</td> <td>ROW TITLE</td> <td>1st January 2020</td> <td>1st January 2020</td> <td>1st January 2020</td> <td>1st January 2020</td> <td>1st January 2020</td> <td>1st January 2020</td> </tr> <tr> <td>ROW TITLE</td> <td>8th January 2020</td> <td>8th January 2020</td> <td>8th January 2020</td> <td>8th January 2020</td> <td>8th January 2020</td> <td>8th January 2020</td> </tr> <tr> <td rowspan="2">Merged header title will go here and centred vertically</td> <td>ROW TITLE</td> <td>12th January 2020</td> <td>12th January 2020</td> <td>12th January 2020</td> <td>12th January 2020</td> <td>12th January 2020</td> <td>12th January 2020</td> </tr> <tr> <td>ROW TITLE</td> <td>21st January 2020</td> <td>21st January 2020</td> <td>21st January 2020</td> <td>21st January 2020</td> <td>21st January 2020</td> <td>21st January 2020</td> </tr> </tbody> </table> </div>