我有一张 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 在其管理面板中生成的。
最佳答案
只需添加一点 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/
关于css - 使用 css 更改表格行布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31048515/