如何让Safari/Firefox Reader View Mode下表格宽度为100%？

可行方案 #

方案一：保留width="100%"属性（推荐） #

虽然HTML5将<table>的width属性标记为过时，但所有主流浏览器及阅读器模式都仍支持该属性，这是目前能确保表格在阅读器模式下占满宽度的最可靠方法。可以在代码中添加注释说明原因，避免后续维护误解。

修改后的代码：

<!-- 保留width="100%"以兼容阅读器模式，虽HTML5标记为过时但浏览器/阅读器均支持 -->
<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>

方案二：结合width属性与内联样式 #

同时添加width="100%"和style="width:100%"，正常浏览时内联样式生效（符合HTML5规范），阅读器模式下即使剥离样式，width属性仍能生效。缺点是HTML验证器仍会标记width属性过时。

代码示例：

<table width="100%" style="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>

方案三：使用<colgroup>设置列宽 #

通过<colgroup>和<col>的width属性分配列宽，部分阅读器会识别该属性，同时能更精细控制每列比例。同样存在HTML验证器警告的问题。

代码示例：

<table>
    <colgroup>
        <col width="50%">
        <col width="50%">
    </colgroup>
    <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>

内容的提问来源于stack exchange，提问作者Ramith