HTML 表格响应 100% 宽度答案

【问题标题】：HTML table responsive 100% widthHTML 表格响应 100% 宽度
【发布时间】：2017-11-02 22:53:57
【问题描述】：

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

【问题讨论】：

HTML 带有那种内联样式？你说你无法控制它。

标签： html css html-table

【解决方案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 然后

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

【讨论】：