Can I use CSS to override table cell widths?

I've got an HTML where the width of table cells is defined in mm (in the @style attribute). This is designed to fit on an A4 page (210 mm page width). I'm using CSS Paged Media.

<?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>

Now I want to use the same table for a different output that uses A5 (width 148.5mm), so I want the CSS to resize the table to fit.

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

This CSS works for very simple tables (one cell). As soon as the table becomes more complex (like the example above), the max-width instruction is ignored.

Is there a way to achieve what I want (make the table fit on A5) in CSS? Or do I have to process the HTML and calculate new cell widths?

Solution

Use !important to override properties in the style attributes:

table, td {
    width: auto !important;
}

From 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.

From https://drafts.csswg.org/css-cascade-3/#cascade-sort, property declarations with !important have a higher importance than 'normal author declarations', and importance has higher priority than specificity.