Two rows of a table with different number of cells, but equal width?-CodePudding

I am trying to make a table with two rows. Each row has a different number of cells. Each cell on both rows should be equal in width, and each row should be equal width as well. Hopefully I've explained that correctly. Here is what I've done so far: -

HTML: -

<table >
  <tr>
    <td width="14%">2007-2016</td>
    <td width="14%">2017</td>
    <td width="14%">2018</td>
    <td width="14%">2019</td>
    <td width="14%">2020</td>
    <td width="14%">2021</td>
    <td width="14%">2022</td>
  </tr>
</table>
  
<table >
  <tr>
    <td width="11%">Event 1</td>
    <td width="11%">Event 2</td>
    <td width="11%">Event 3</td>
    <td width="11%">Event 4</td>
    <td width="11%">Event 5</td>
    <td width="11%">Event 6</td>
    <td width="11%">Event 7</td>
    <td width="11%">Event 8</td>
    <td width="11%">Event 9</td>
  </tr>
</table>

CSS: -

td {
  border: 1px solid;
  border-color: blue;
}

.top-table {
  width: 100%;
}

.bottom-table {
  width: 100%;
}

I've tried doing it with one table, but couldn't figure it out, which is why I made two separate tables instead. Surely there should be something easier? The nearest I could find it this fiddle, but that's using divs.

td {
  border: 1px solid;
  border-color: blue;
}

.top-table {
  width: 100%;
}

.bottom-table {
  width: 100%;
}

<table >
  <tr>
    <td width="14%">2007-2016</td>
    <td width="14%">2017</td>
    <td width="14%">2018</td>
    <td width="14%">2019</td>
    <td width="14%">2020</td>
    <td width="14%">2021</td>
    <td width="14%">2022</td>
  </tr>
</table>

<table >
  <tr>
    <td width="11%">Event 1</td>
    <td width="11%">Event 2</td>
    <td width="11%">Event 3</td>
    <td width="11%">Event 4</td>
    <td width="11%">Event 5</td>
    <td width="11%">Event 6</td>
    <td width="11%">Event 7</td>
    <td width="11%">Event 8</td>
    <td width="11%">Event 9</td>
  </tr>
</table>

CodePudding user response：

Does this work for you?

td {
  border: 1px solid;
  border-color: blue;
}

.top-table {
  width: 100%;
}

.bottom-table {
  width: 100%;
}

<table >
  <tr>
    <td width="14%">2007-2016</td>
    <td width="14%">2017</td>
    <td width="14%">2018</td>
    <td width="14%">2019</td>
    <td width="14%">2020</td>
    <td width="14%">2021</td>
    <td width="14%">2022</td>
  </tr>
  <tr>
    <td width="11%">Event 1</td>
    <td width="11%">Event 2</td>
    <td width="11%">Event 3</td>
    <td width="11%">Event 4</td>
    <td width="11%">Event 5</td>
    <td width="11%">Event 6</td>
    <td width="11%">Event 7</td>
    <td width="11%">Event 8</td>
    <td width="11%">Event 9</td>
  </tr>
</table>

CodePudding user response：

There is another way to do this with a table, by using the flexbox. It is important to insert the <tbody> because some browsers will insert it if it is missing. For the correct flex table the <tbody> is required.

Each row can have a different number of cells. By adjusting the percentage .td-7 (100% : 7) and .td-9 (100% : 9) you will get the correct width of the cells per row.

.ftable, .ftable tr {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}
.ftable tbody, .ftable td {
  display: block;
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}
.ftable td {
  vertical-align: top;
  text-align: inherit;
  text-align: -webkit-match-parent;
}
tr.td-7 td {
  max-width: 14.285%;
}
tr.td-9 td {
  max-width: 11.111%;
}

/** example borders **/

.ftable {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
.ftable td {
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
  font: normal 14px/1.3 sans-serif;
  padding: 2px 5px 4px 5px;
}

<table >
  <tbody>
    <tr >
      <td>2007-2016</td>
      <td>2017</td>
      <td>2018</td>
      <td>2019</td>
      <td>2020</td>
      <td>2021</td>
      <td>2022</td>
    </tr>
    <tr >
      <td>Event 1</td>
      <td>Event 2</td>
      <td>Event 3</td>
      <td>Event 4</td>
      <td>Event 5</td>
      <td>Event 6</td>
      <td>Event 7</td>
      <td>Event 8</td>
      <td>Event 9</td>
    </tr>
  <tbody>
</table>