使 <td> 充当 <tr> (table-row) 在伞 <tr> 内答案

【问题标题】：Make a <td> act as a <tr> (table-row) INSIDE an umbrella <tr>使 <td> 充当 <tr> (table-row) 在伞 <tr> 内
【发布时间】：2017-03-15 01:36:09
【问题描述】：

之前有人问过这个问题的变体，但我找不到我的具体问题的答案。如下：

我有一个table，我需要能够使用 ListJS 之类的 javascript 插件对其进行排序。这并不重要，但我需要 SINGLE <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> 的“第一行”下方，使它们充当第二和第三行。

我在.line2 和.line3 上尝试了display:block; 和display:table-row;，但正如你所见，我没有得到想要的结果。

这可能吗？

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

【问题讨论】：

你能发布你预期的输出设计吗……不清楚你想要什么
当然，见jsfiddle.net/op5cb4qt

标签： javascript html css html-table

【解决方案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/

【讨论】：

嘿，这和我想象的一模一样！那么这是使用 Flexbox 吗？有趣的。回复：常规标签——你的意思是只使用另一个吗？由于 js 排序限制，这是不可能的。
@TraceDeCoy 是的，flexbox 对于当今的浏览器来说非常安静且易于设置。见css-tricks.com/snippets/css/a-guide-to-flexbox
@TraceDeCoy 不，我的意思是 div、页脚、arrticle、section 或 p。如果那不是真实的表格，则反映内容的任何内容
@TraceDeCoy 没关系，我检查了小提琴。您还需要在 td 上重置显示以完全破坏表格布局）：jsfiddle.net/t6zadmhd/4（答案也使用 CSS 和评论更新）Thnaks 用于反馈；）
没关系：弹性基础：XX%；似乎可以解决问题！再次感谢老兄，救命稻草。

【解决方案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>

【讨论】：

使用flex时如何指定每个的宽度？
你可以设置.line1: width: 100px;它使所有表格宽度增加。但是如果你设置动态宽度.line1: width: 24%;，它不会改变表格宽度。然后你将它设置为25%第四个td.line1换行到下一行，因为它们有边框并且4*25% + 8px比100%更多
如果我在每个上设置百分比宽度，我还需要 "flex: 1;"也在他们身上？
flex属性用于设置item的宽度（当flex方向默认设置为row时）。因此设置宽度时不需要flex: 1。
Flex 非常有用。我建议你阅读这篇简单而全面的文章：w3schools.com/css/css3_flexbox.asp

【解决方案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%;
}

【讨论】：

如此简单。谢谢！

【解决方案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>

【讨论】：