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> 

所以当宽屏最大为700像素时

当大于700px时

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

欲获得更多信息

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