Noam B. Noam B. - 1 month ago 6
CSS Question

table with first row - 1 cell, second row - 2 cells, 3rd row - 3 cells

How can I make such a table, with first row - 1 cell, second row - 2 cells, 3rd row - 3 cells with all cells in each row having same size?
Is it possible?

Answer

Here is one more simple solution

CSS:

table {
  width: 100%;
  border: none;

}
.td_b {
  border: 1px solid black;
}

HTML:

<table>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
      <td class="td_b">2nd</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr>
   <td>
    <table>
     <tr>
      <td class="td_b">1st</td>
      <td class="td_b">2nd</td>
      <td class="td_b">3rd</td>
     </tr>
    </table>
   </td>
  </tr>
</table>

Here is JSFiddle link to that

Yet another solution is:

CSS:

table {
  width: 100%;
  border: none;
}
td {
  border: 1px solid black;
}
.td_1 {
  width: 100%;
}
.td_2 {
  width: 50%;
}
.td_3 {
  width: 33%;
}

HTML:

<table>
  <tr>
    <td class="td_1" colspan="6">1st</td>
  </tr>
  <tr>
    <td class="td_2" colspan="3">1st</td>
    <td class="td_2" colspan="3">2nd</td>
  </tr>
  <tr>
    <td class="td_3" colspan="2">1st</td>
    <td class="td_3" colspan="2">2nd</td>
    <td class="td_3" colspan="2">3rd</td>
  </tr>
</table>

Here is JSFiddle example

Comments