html - 如何覆盖表格中的 CSS 样式

Question

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

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

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

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

Answer 1

将!important规则应用到它的末尾。

在您的 CSS 文件中：

table {
    width: 100% !important;
}

Answer 2

由于您width的设置与属性内联，因此style您将无法覆盖它。有时甚至 !Important 都不会覆盖它。如果您可以将尺寸信息移动到一个类中，那么您可以在打印样式表中将宽度重置为 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 选择器特定性的更多信息（当多个样式指向同一个元素时谁获胜），请参阅此处，我在网络上最喜欢的 CSS 文章。