强制表格单元格到新行 [英] Forcing table cell onto new row

问题描述

我有一个标准表格，其中的单元格在同一行中从左到右显示，但我想强制第三个单元格出现在新行上。有没有CSS调整可以做到这一点？

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?

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

显示为：One Two Three Four

This displays as: One Two Three Four

我可以强制第三列显示在新行上：

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

One Two
Three Four

推荐答案

不完全确定为什么你不会把它变成一个新的行，但我想如果你有使用CSS，你可以做这样的事情：

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;
}

JSFiddle

这篇关于强制表格单元格到新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！