html – 在CSS中为表格堆栈整个列

2024年1月27日 185次阅读

有没有办法在CSS中堆叠整个列,所以如果我的桌面表如下：

| H1 | H2 | H3 | H4 |
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 | D2 |

它会变成移动设备：

| H1 |
| A1 |
| A2 |
| H2 |
| B1 |
| B2 |
| H3 |
| C1 |
| C2 |
| H4 |
| D1 |
| D2 |

我希望这是有道理的

这是我的html结构：

    <table class="rds-table">
    <tr>
        <th>H1</th>
		<th>H2</th>
		<th>H3</th>
		<th>H4</th>
	</tr>
    <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
    </tr>
	<tr>
		<td>A2</td>
		<td>B2</td>
		<td>C2</td>
	    <td>D2</td>
	</tr>
	<tr>
		<td>A3</td>
		<td>B3</td>
		<td>C3</td>
		<td>D3</td>
	</tr>
</table>

最佳答案

.column {
    float:left;
}

.element {
    display: block;
    float:left;
    clear:both;
}

@media (max-width: 980px) {
    .column {
        clear:both;
    }
}


<div class="rds-table">
    <div class="column">
        <div class="element">Header One</div>
        <div class="element">Data One</div>
        <div class="element">Data One</div>
    </div>
    <div class="column">
        <div class="element">Header Two</div>
        <div class="element">Data Two</div>
        <div class="element">Data Two</div>
    </div>
</div>

媒体查询将查找980或更低的屏幕大小.编辑：现在有更新的代码,这将使用div而不是表元素.

点赞