用 html width 属性覆盖在 css 中声明的表格宽度

Posted 2023-03-06

【中文标题】用 html width 属性覆盖在 css 中声明的表格宽度

【英文标题】：Overwriting table width declared in css, with the html width attribute

【发布时间】：2019-07-25 10:00:52

【问题描述】：

一个我无法找到答案的不寻常问题：

是否可以使用 width 属性覆盖带有 css 样式的表格。

我希望 html 表默认为 width 或 100%（使用 css），除非在标记中将数字 width 参数传递给我的表。

现在，如果我在 css 中将表格的 width 设置为 auto，我可以使用 width 属性覆盖宽度，方法是将其应用于标记中的 table 元素。但是，auto 的宽度不默认为 100%。如果我在 css 中将表格的 width 设置为 100%，则无法使用 width 属性覆盖宽度，方法是将其应用于标记中的 table 元素。

有没有人知道一种变通方法，这样我就可以把我的蛋糕也吃了？

.table-a 
  width: 100%;
  border: 1px solid black;
  margin: 48px auto 16px;


.table-b 
  width: auto%;
  border: 1px solid black;
  margin: 48px auto 16px;

<table class="table-a" >
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<table class="table-b" >
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<table class="table-b">
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<p>Table A seems to show that the width attribute will not override external stylesheets the same way inline stylesheets.</p>

<p>Is there a way to ensure that when a width attribute is not passed to a table, that it defaults to 100%, and otherwise adheres to the width declaration/</p>

【问题讨论】：

你可以发布你的代码 sn-p 吗？

【参考方案1】：

table 
  border: 1px solid black;
  margin: 48px auto 16px;


table:not([width]) 
  width: 100%;

<table >
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
  </tr>
</table>

<p>The :not() selector successfully enables me to use the width attribute in the markup and style every other table with a width of 100%.</p>

您可以使用:not 选择器。例如table:not([width]) 然后css会应用到所有没有width属性的表

【讨论】：

这很有趣。也许是我考虑使用:not 的第一个用例。我会测试的。