使用 css 更改表格行布局

Question

我有一张桌子

<table>
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </thead>
  <tbody>
    <tr>
      <td>Cell A1</td>
      <td>Cell A2</td>
      <td>Cell A3</td>
    </tr>
    <tr>
      <td>Cell B1</td>
      <td>Cell B2</td>
      <td>Cell B3</td>
    </tr>
  </tbody>
</table>

我需要做的是使用CSS将整个表格显示为单列

输出应该是：

 +---------+
 | Cell A1 |
 +---------+
 | Cell A2 |
 +---------+
 | Cell A3 |
 +---------+
 | Cell B1 |
 +---------+
 | Cell B2 |
 +---------+
 | Cell B3 |
 +---------+

其背后的原因是每个表格单元格都非常宽，并且该表格是由 CouchCMS 在其管理面板中生成的。

Answer 1

只需添加一点 CSS 即可显示为block表中的每个元素，并隐藏您的thead：

table,
tr,
td {
  display: block;
}

thead {
  display: none;
}

<table>
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </thead>
  <tbody>
    <tr>
      <td>Cell A1</td>
      <td>Cell A2</td>
      <td>Cell A3</td>
    </tr>
    <tr>
      <td>Cell B1</td>
      <td>Cell B2</td>
      <td>Cell B3</td>
    </tr>
  </tbody>
</table>

JSFIDDLE：http://jsfiddle.net/ghorg12110/k8pojm31/