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

您可以使用媒体查询，然后更改宽屏尺寸

.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