Make 1 tr with 4 td's act like: 2 tr with 1 td in each and 1 tr with 2 td in, only with CSS

Question

With this HTML:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

I get this output:

1 2 3 4

But what i want is:

 1
2 3
 4

How can I achieve that without changing the HTML, only with CSS?

If i do like this:

td { display: table-row; }
td:nth-child(2), td:nth-child(3) { display: table-cell; }

It does not work. But if i remove "display:table-cell" i only need to make 2. and 3. td into 1 tr

score 1 · Accepted Answer · answered Oct 21 '17 at 17:10

1

You can use Flexbox here and make first and last cell take 100% of width.

tr {
  display: inline-flex;
  flex-wrap: wrap;
}
td {
  flex: 1;
  text-align: center;
}
td:first-child,
td:last-child {
  flex: 0 0 100%;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

answered Oct 21 '17 at 17:10

Nenad Vracar

Somehow this aint working in IE11, neither on a newer iPhone, why? – MichaelJorgensenDK Oct 21 '17 at 18:12
Not sure, take a look at known issues here http://caniuse.com/#search=flexbox and here https://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why/35137869#35137869 – Nenad Vracar Oct 21 '17 at 18:22

1 Answers1