CODEWITHSUNDEEP
css
MichaelJorgensenDK
MichaelJorgensenDK

Reputation: 583

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

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

Example: https://jsfiddle.net/1h3eyLqk/

Upvotes: 0

Views: 731

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122087

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>

Upvotes: 1

Related Questions