我有一张桌子
<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 在其管理面板中生成的。
只需添加一点 CSS 即可显示为
blocktheadtable,
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>尝试这套CSS规则
table {
border: 1px solid #ccc;
border-collapse: collapse;
}
tbody,
thead,tr {
display: block;
}
th,
td {
padding: 4px;
display: block;
}<table border="1">
<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>如果您想显示单列，则不要使用多个
<th><th><html>
<head>
<style>
span{
color:#019ac8;
}
table{
border:1px dotted #000;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td><span>Cell</span> A1</td></tr>
<tr><td><span>Cell</span> A2</td></tr>
<tr><td><span>Cell</span> A3</td>
</tr>
<tr>
<td><span>Cell</span> B1</td></tr>
<tr><td><span>Cell</span> B2</td></tr>
</tr> <td><span>Cell</span> B3</td>
</tr>
</tbody>
</table>
</body>
</html>