单个 table 单元格在另一行上全宽

Question

我有一个 table 标记，如下所示：

-----------------
| a | b | c | d |
-----------------

在不同的断点上，我希望 'd' 单元格向下移动并变为全角。

-------------
| a | b | c |
-------------
|     d     |
-------------

css可以吗？

Answer 1

您可以使用媒体查询和 flexbox 来覆盖默认的 table 样式。

table {
  border-collapse: collapse;
  display: block;
}

tr {
  display: flex;
  flex-wrap: wrap;
}

td {
  border: 1px solid #ddd;
  display: inline;
  flex: 1;
  padding: 5px 10px;
  text-align: center;
}

td.d {
  flex: 3;
  flex-basis: 100%;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td class="d">D</td>
  </tr>
</table>

单个 table 单元格在另一行上全宽

Single table cell to be full width on another row

html

css

html-table

tablecell