我正在尝试通过在较小的屏幕尺寸下为 2 tds 提供 100% 宽度来使一个简单的 HTML 表格响应,到目前为止我已经有了这个...
.test1{
background:teal;
text-align:center;
padding:20px;
}
.test2 {
background:tan;
padding:20px;
text-align:center;
}
<table style="width:100%;">
<tr>
<td style="width:300px;" class="test1">Test Content</td>
<td style="width:300px;" class="test2">Test Content</td>
</tr>
</table>
我已经尝试将宽度更改为 100%,但这对我不起作用,仅在 CSS 中执行此操作的最简单方法是什么?我无法控制生成的 HTML 表格。
我可以将 flexbox 样式应用于表格吗?
最佳答案
您可以使用media 查询然后更改您的宽度屏幕大小
.test1 {
background: teal;
text-align: center;
padding: 20px;
}
.test2 {
background: tan;
padding: 20px;
text-align: center;
}
@media (max-width: 700px) {
.test1, .test2 {
width: 100% !important;
float: left;
}
}
<table style="width:100%;">
<tr>
<td style="width:300px;" class="test1">Test Content</td>
<td style="width:300px;" class="test2">Test Content</td>
</tr>
</table>
所以当屏幕宽度最大 700px 时
然后超过 700px 然后
您可以根据需要添加更多媒体查询。
更多信息
关于HTML 表格响应 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47077837/