gpt4 book ai didi

html - 响应表 : move cell to new line if table too small

转载 作者:太空狗 更新时间:2023-10-29 15:55:30 24 4
gpt4 key购买 nike

我处于需要使用table的情况,但我也希望它能够响应

对于某些点 under max-width: 500px , 我想转换我的第三个 <td>元素到第二行 100% width和其他人 50% width每一个。

我知道 display: block<td> 上我可以将它们放在彼此下面,我最终会这样做。但我想要介于两者之间的那一步。

table {
height: 400px;
width: 100%;
}
table tr td:nth-child(1) {
background-color: red;
}
table tr td:nth-child(2) {
background-color: green;
}
table tr td:nth-child(3) {
background-color: blue;
}
@media screen and (max-width: 500px) {
table tr td:nth-child(3) {
background-color: pink;
clear: both;
display: block;
width: 100%;
}
table tr td:nth-child(1), table tr td:nth-child(2) {
display: block;
width: 50%;
}
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

(Fiddle version)

我已经尝试过不同的 displayinline-block 这样的变体.这是可能吗?最好没有 JS?

最佳答案

如果您处理单元格周围的空白以使两个 50% 宽度的元素适合,则内联 block 有效:

table {
...
border-spacing: collapse;
}
td {
padding: 0;
}

Demo

请注意,我已经从您的第三个单元格中删除了一些不必要的样式。

关于html - 响应表 : move cell to new line if table too small,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29106302/

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