我可以使用 CSS 覆盖 table 单元格宽度吗？

Question

我有一个 HTML，其中 table 单元格的宽度以毫米为单位定义（在 @style 属性中）。这是为适合 A4 页面（210 毫米页面宽度）而设计的。我正在使用 CSS 分页媒体。

<?xml version="1.0" encoding="UTF-8"?>
<html lang="en">
    <head>
        <title>A5 Test</title>
        <link rel="stylesheet" type="text/css" href="booktemplatea5test.css"/>
    </head>
    <body>
        <table data-ait-rows="2" data-ait-cols="2" style="width:170mm;" data-ait-tabletype="warning">
            <tbody>
                <tr style="height:12mm;">
                    <td colspan="2" style="width:100%;border-width:3pt;border-color:#000000;background-color:#FFB2B2;" >
                        <p class="warning">Possible hazard. Risk of personal injury.</p>
                    </td>
                </tr>
                <tr style="height:12.4mm;">
                    <td style="width:40.2mm;border-left-width:0.40pt;border-right-width:0.40pt;border-top-width:0.00pt;border-bottom-width:0.40pt;border-color:#010101;">
                        <p class="body">text</p>
                    </td>
                    <td style="width:128.1mm;border-left-width:0.00pt;border-right-width:0.40pt;border-top-width:0.00pt;border-bottom-width:0.40pt;border-color:#010101;vertical-align: middle;">
                        <p class="body" >A warning is used</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

现在我想对使用 A5（宽度 148.5 毫米）的不同输出使用相同的 table，因此我希望 CSS 调整 table 的大小以适合。

@page  {
    size: A5 portrait;
    margin-start: 1cm;
    margin-end: 1cm;
    margin-top: 2cm;
    margin-bottom: 2cm;
}
table, tr, td  {
max-width: 100mm;
}

此 CSS 适用于非常简单的 tables（一个单元格）。一旦 table 变得更复杂（如上例），最大宽度指令将被忽略。

有没有办法在 CSS 中实现我想要的（使 table 适合 A5）？还是我必须处理 HTML 并计算新的单元格宽度？

Answer 1

使用 !important 覆盖 style 属性中的属性：

table, td {
    width: auto !important;
}

来自https://www.w3.org/TR/css-style-attr/#interpret：

The declarations in a style attribute apply to the element to which the attribute belongs. In the cascade, these declarations are considered to have author origin and a specificity higher than any selector.

从 https://drafts.csswg.org/css-cascade-3/#cascade-sort 开始，带有 !important 的属性声明比 'normal author declarations' 具有更高的重要性，并且重要性比特异性具有更高的优先级。

我可以使用 CSS 覆盖 table 单元格宽度吗？

Can I use CSS to override table cell widths?

css-paged-media

antenna-house