CODEWITHSUNDEEP
csscss-tables
in43sh
in43sh

Reputation: 933

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

Upvotes: 1

Views: 40

Answers (1)

Meet
Meet

Reputation: 702

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>

Upvotes: 3

Related Questions