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

Time:08-17

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

  • Related