HTML 表格响应 100% 宽度

Question

我正在尝试通过在较小的屏幕尺寸下为 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 样式应用于表格吗？

Answer 1

您可以使用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 然后

您可以根据需要添加更多媒体查询。

更多信息

https://www.w3schools.com/css/css_rwd_mediaqueries.asp