响应式 table:如果 table 太小,则将单元格移动到新行
Responsive table: move cell to new line if table too small
我需要使用table
,但我也希望它响应.
对于某些点 under max-width: 500px
,我想将我的第三个 <td>
元素转换为具有 100% width
的第二行和其他具有 50% width
的元素。
我知道 <td>
上的 display: block
我可以将它们放在彼此下面,我最终会这样做。但我想要介于两者之间的那一步。
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>
我已经尝试了不同的 display
变体,例如 inline-block
。
这是可能吗?最好没有 JS?
如果您处理单元格周围的空白,使两个 50% 宽度的元素适合,则行内块有效:
table {
...
border-spacing: collapse;
}
td {
padding: 0;
}
请注意,我已经从您的第三个单元格中删除了一些不必要的样式。
我需要使用table
,但我也希望它响应.
对于某些点 under max-width: 500px
,我想将我的第三个 <td>
元素转换为具有 100% width
的第二行和其他具有 50% width
的元素。
我知道 <td>
上的 display: block
我可以将它们放在彼此下面,我最终会这样做。但我想要介于两者之间的那一步。
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>
我已经尝试了不同的 display
变体,例如 inline-block
。
这是可能吗?最好没有 JS?
如果您处理单元格周围的空白,使两个 50% 宽度的元素适合,则行内块有效:
table {
...
border-spacing: collapse;
}
td {
padding: 0;
}
请注意,我已经从您的第三个单元格中删除了一些不必要的样式。