iantresman iantresman - 10 months ago 47
CSS Question

Forcing table cell onto new row

I have a standard table in which the cells appear left-to-right in the same row, but I'd like to force the third cell to appear on a new line. Is there a CSS tweak that can do this?

<td class="col-1">One</td>
<td class="col-2">Two</td>
<td class="col-3">Three</td>
<td class="col-4">Four</td>

This displays as: One Two Three Four

Can I force the third column to display on a new row thus:

One Two
Three Four

Answer Source

Not exactly sure why you wouldn't just make it a new row, but I suppose if you had to use CSS, you could do something like this:

table tr td {
  display: block;
  width: 50%;
  box-sizing: border-box;
  float: left;