0

我有一个 HTML，其中表格单元格的宽度以 mm （在@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 毫米）的不同输出，所以我希望 CSS 调整表格大小以适合。

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

这个 CSS 适用于非常简单的表格（一个单元格）。一旦表格变得更复杂（如上面的示例），max-width 指令就会被忽略。

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

4

1 回答 1

1

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

table, td {
    width: auto !important;
}

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

样式属性中的声明适用于该属性所属的元素。在级联中，这些声明被认为具有作者来源和比任何选择器更高的特异性。

来自https://drafts.c​​sswg.org/css-cascade-3/#cascade-sort的属性声明!important比“正常作者声明”具有更高的重要性，并且重要性比特异性具有更高的优先级。

于 2021-08-04T18:57:45.597 回答