如何覆盖表格中的 CSS 样式答案

【问题标题】：How can I override the CSS style IN a table如何覆盖表格中的 CSS 样式
【发布时间】：2018-05-10 14:38:44
【问题描述】：

当你在 tinymce 中拉伸你的桌子时，你会得到这个

<table class="opbouw" style="width: 725px; height: 170px;" border="0" cellpadding="0" cellspacing="0">

但是，我希望它被覆盖，因为所有表格的打印宽度都必须为 100%，否则它看起来很糟糕。

谁能告诉我如何覆盖它以使表格在打印时为 100%？

【问题讨论】：

标签： html css tinymce html-table

【解决方案1】：

由于您的width 设置为与style 属性内联，您将无法覆盖它。 Sometimes not even !Important will override it. 如果您可以将尺寸信息移动到一个类中，那么您可以在打印样式表中将宽度重置为 100%。

如果您不想将尺寸信息添加到类opbouw，那么您可以创建第二个类，例如narrowTable，并将两者都应用到表中，如下所示：

<table class="opbouw narrowTable" ...>

在您的打印样式表中，您可以重置尺寸属性：

<style type="text/css">
 @media print
 {
     TABLE, .narrowTable
     {
         width: 100%;
         margin: 0;
         padding: 0;
     }
  }

  @media screen
  {

     .opbouw
     {
     }

     .narrowTable
     {
         width: 725px;
         height: 150px;
         border: none;
     }

     /* all your normal screen styles */
  }
</style>

有关 CSS 选择器特定性的更多信息（当多个样式指向同一个元素时谁获胜），see this here，我在网络上最喜欢的 CSS 文章。

【讨论】：

【解决方案2】：

在其末尾应用!important 规则。

在您的 CSS 文件中：

table {
    width: 100% !important;
}

【讨论】：