I am trying to achieve this layout (attached in the screenshot).
I am struggling with adding the ROW TITLE and making the "Merged header title will go here and centred vertically" to grow as per the screenshot, I've tried achieving this with rowSpan / colSpan but it breaks the table.
Can someone tell me what I'm doing wrong, or point me in some kind of direction please? Here is my current work in a sandbox:
Here is a screenshot of my current implementation for reference
.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 >
<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>
CodePudding user response:
You'd just use rowspan
, but obviously you'd also need to remove every second heading. You'd then add the new cells for "ROW TITLE" and expand colspan
of the empty cell.
.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 >
<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>