如何在不使用 <table width="100%"> 的情况下为 Safari/Firefox 阅读器模式制作 100% 的表格？

Question

在 Safari 和 Firefox 等浏览器上，表格宽度在阅读器视图/模式下不会 100% 显示。但如果我添加 HTML 验证器，则会将其标记为过时元素。添加样式不起作用，因为阅读器视图/模式会剥离 CSS。

您建议我做什么来解决这个问题？

谢谢您的帮助。

我的代码中的表格：

<table width="100%">
    <caption>The table below shows nutritional values per serving without the additional fillings.</caption>
    <tbody>
        <tr>
            <td>Calories</td><td>227kcal</td>
        </tr>
        <tr>
            <td>Carbs</td><td>0g</td>
        </tr>
        <tr>
            <td>Protein</td><td>20g</td>
        </tr>
        <tr>
            <td>Fat</td><td>22g</td>
        </tr>
    </tbody>
</table>

尝试对表格使用内联样式，但这也在阅读器模式/视图中被剥离。

Answer 1

刚刚在 Google Chrome 中检查过，使用 CSS 类就可以解决问题，例如：

.tbl_reader {
    width: 100%;
}

当然，不要忘记将

class="tbl_reader"

添加到

table

标签。