在<td> <tr> 雨伞<tr>内充当(桌排)

Question

以前有人问过这个问题的变体，但我找不到我具体问题的答案。这里是：

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

所以我的表格看起来像：

<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，但正如你所看到的，我没有得到想要的结果。

这可能吗？

编辑：这是我预期的设计输出：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可能会限制您，但是float可以在不使用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>