我可以使用 CSS 覆盖表格单元格的宽度吗？
Posted
技术标签:
【中文标题】我可以使用 CSS 覆盖表格单元格的宽度吗？【英文标题】：Can I use CSS to override table cell widths? 【发布时间】：2021-10-09 14:41:30 【问题描述】：我有一个 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 并计算新的单元格宽度？
【问题讨论】：
【参考方案1】：使用!important 覆盖style 属性中的属性：
table, td
width: auto !important;
来自https://www.w3.org/TR/css-style-attr/#interpret：
样式属性中的声明适用于该属性所属的元素。在级联中，这些声明被认为具有作者来源并且比任何选择器都具有更高的特异性。
从https://drafts.csswg.org/css-cascade-3/#cascade-sort 开始，带有!important 的属性声明的重要性高于“正常作者声明”，并且重要性的优先级高于特异性。
【讨论】：
width:auto 的缺点是比例丢失。在我的示例中，单元格是 40 毫米和 128 毫米宽， width: auto 两者的宽度相同。所以如果可以的话，我想避免这种情况。 忘记覆盖，只对所有width使用百分比。
我怀疑可能是这种情况，只是确保我没有忽略更简单的方法。以上是关于我可以使用 CSS 覆盖表格单元格的宽度吗？的主要内容，如果未能解决你的问题，请参考以下文章