将<td>作为<tr>（表格行）作为保护伞<tr>

Question

之前已经提到了这种变化，但我无法找到我的具体问题的答案。 开始：

我有一个table ，我需要能够使用像ListJS这样的javascript插件进行排序。 这不重要，但能够我需要一个单一的 <tr> PER列表。

所以我的表看起来像：

<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

http://jsfiddle.net/t6zadmhd/

我需要的是<td class="line2">和<td class="line3">放在<td>的“第一行”之下，使它们充当第二和第三个表行。

我试过display:block; 并display:table-row; 在.line2和.line3 ，但正如你所看到的，我没有得到理想的结果。

这可能吗？

编辑：这是我期望的DESIGN输出： http ： //jsfiddle.net/op5cb4qt/

Answer 1

这个想法确实是重置display ，你可以使用flex boxmodel完全打破table-layout ：

 body { color: #fff; } table, .line2, .line3 { width: 100%; } tr { display: flex; flex-flow: row wrap; } td { display:block;/* IE fix */ margin: 1px; } .line1 { background: red; flex: 1; } .line2, .line3 { background: blue; } .line3 { background: green; } 

 <table> <tr> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line2">line 2</td> <td class="line3">line 3</td> </tr> </table> 

http://jsfiddle.net/t6zadmhd/1/

但是， 如果不是桌子，为什么不使用常规标签呢？

要进一步了解flex，您可以阅读https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

 tr{display:flex;flex-wrap:wrap;} .line2, .line3{width:100%;} 

 <table> <tr> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line2">line 2</td> <td class="line3">line 3</td> </tr> </table> 

Answer 3

你只能使用display: block; 但你必须设置百分比宽度。

td {
  padding: 0;
  margin: 0;
}

.line1 {
  background: red;
  float: left;
  display: block;
  width: 25%;
}

.line2 {
  background: blue;
  float: left;
  display: block;
  width: 100%;
}

.line3 {
  float: left;
  background: green;
  display: block;
  width: 100%;
}

Answer 4

有几种方法可以实现这一点。 Flex是最方便的，您不需要使用表格。 但是，如果您有任何较旧的浏览器要求，flex可能会限制您，但浮动可以在不使用flex的情况下完成您的要求。

http://jsfiddle.net/eeb03gts/2/

 body { color: #fff; } table { width: 100%; } table, tr, td { box-sizing: border-box; } tr { clear:both; } .line1 { background: #f00; width: 25%; float: left; } .line2 { background: #00f; float: left; width: 100%; } .line3 { background: #008000; float: left; width: 100%; } 

 <table> <tr> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line1">line 1</td> <td class="line2">line 2</td> <td class="line3">line 3</td> </tr> </table>