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/

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

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

做一个（表行）INSIDE伞

4 个答案: