CODEWITHSUNDEEP
htmlcsshtml-table
mark
mark

Reputation: 245

How can I span multiple rows with my table row headings?

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: https://codesandbox.io/s/pedantic-river-6ypelb?file=/src/App.js

Image of design

Here is a screenshot of my current implementation for reference

Current work

.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>

Upvotes: 1

Views: 1553

Answers (1)

isherwood
isherwood

Reputation: 61056

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 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>

Upvotes: 2

Related Questions