如何使用表格行標題跨越多行？

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>