css - 使用 css 更改表格行布局

Question

我有一张 table

<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>

我需要做的是显示 整 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/