Search code examples
csscss-tables

Is it possible to have some cells in a table row to have vertical flow instead or horizontal using css?


I have a basic table:

<table border="1">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
  </tr>
</table>

Is it possible to make last row elements have vertical flow instead of horizontal? Here's what I want to achieve:

enter image description here


Solution

  • First create individual tr for both td and then add colspan="2" to td. Below is working example.

    <table border="1">
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
      </tr>
      <tr>
        <td colspan="2">Row 3, Cell 1</td>
      </tr>
      <tr>
        <td colspan="2">Row 3, Cell 2</td>
      </tr>
    </table>