gpt4 book ai didi

html - 使用 CSS 重新排列 html 表格

转载 作者:行者123 更新时间:2023-11-28 03:13:20 25 4
gpt4 key购买 nike

我有一个这样的 html 表格,但是有几个这样的 tbody 元素。

<table>
<tbody>
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
</tr>
</tbody>
</table>

有没有什么办法可以用 CSS 改变这个表格的外观,让它看起来像这样排列的表格:

<table>
<tbody>
<tr>
<td>Header 1</td>
<tr/>
<tr>
<td>Content 1</td>
</tr>
<tr>
<td>Header 2</td>
</tr>
<tr>
<td>Content 2</td>
<tr/>
</tbody>
</table>

最佳答案

实现此目的的一种方法是使用具有 data 属性的伪元素。

伪元素的 content 属性将调用 data 属性,该属性将包含与该列标题相同的文本。

只需隐藏表头并使用媒体查询(或在您想要的任何其他情况下)显示伪元素。

table {
width: 500px;
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
@media all and (max-width: 600px) {
tr:nth-child(1) {
display: none;
}
tr {
display: block;
width: 100%;
}
tr td {
display: block;
width: 100%;
}
tr td::before {
content: attr(data-header);
display: block;
}
}
<table>
<tbody>
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td data-header="Header 1">Content 1</td>
<td data-header="Header 2">Content 2</td>
</tr>
</tbody>
</table>

<p style="margin-left: 210px">&larr; resize &rarr;</p>

关于html - 使用 CSS 重新排列 html 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45602168/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com