使用css类删除表样式

时间:2013-10-07 21:15:29

标签: html css

我想要一个会删除表格上所有样式的类,但是我无法使它工作:

这是我到目前为止所尝试的:

<html>
   <head>
      <link type="text/css" rel="stylesheet" href="../../css/css1.css" media="all" />
      <link type="text/css" rel="stylesheet" href="../../css/css2.css" media="all" />
      <link type="text/css" rel="stylesheet" href="../../css/css3.css" media="all" />
      <link type="text/css" rel="stylesheet" href="../../css/css4.css" media="all" />
      <link type="text/css" rel="stylesheet" href="../../css/css5.css" media="print" />

     <style>
        .nostyle table, caption, tbody, tfoot, thead, tr, th, td {
          margin: 0;
          padding: 0;
          border: 0;
          outline: 0;
          font-size: 100%;
          vertical-align: baseline;
          background: transparent;
        }
     </style>

   </head>

   <body>
     <div class="nostyle">
        <table>
            <!-- more table properties -->
        </table>
     </div>
   </body>
</html>

我无法弄清楚为什么这不起作用:/

我从以下代码获得了代码:How to remove all inherited CSS formatting for a table?

6 个答案:

答案 0 :(得分:4)

您有#nostyle,但应该是.nostyle。期间为class es,主题标签为id s。我只需将#nostyle table, caption, tbody, tfoot, thead, tr, th, td替换为*,即可将这些样式应用于文档中的所有内容。

答案 1 :(得分:1)

请注意,您的选择器会专门选择.nostyle table,但会选择任意thtd等。要解决这个问题,它应该看起来像.nostyle table, .nostyle caption, .nostyle tbody ...

目前,如果您的任何CSS文件中有一个更具体的选择器,它可能会覆盖每个元素的通用CSS而不是表本身。

另外,一些建议,学习使用FireBug或任何浏览器的内置开发人员工具来检查每个元素上存在哪些样式并阅读它们的来源。它真的可以帮助你自己解决这类问题。

答案 2 :(得分:0)

你真的应该考虑使用标准的CSS重置之一(参见这里的热门版本http://www.cssreset.com/

只需将重置文件包含为FIRST链接样式表。

这些不仅会影响表格样式(其中一些是您在规则中遗漏的),还会影响其他元素的样式。这为您提供了关于CSS的更可预测的跨浏览器开发体验。

答案 3 :(得分:0)

无论哪种,

将div'class =“NoStyle”'更改为'id =“noStyle”'

将css更改为

.nostyle table, caption, tbody, tfoot, thead, tr, th, td { etc...

您正在尝试将ID样式应用于类。 。

答案 4 :(得分:0)

您需要的是创建一个仅适用于表的css规则,只要它具有特定的类。而不是:

table { ... }

使用:

.table-styled {
     ...
}

.table-styled td {
     ...
}

因此,如果您需要清除样式,则仅取决于删除表元素的.table-styled类。

答案 5 :(得分:0)

获得“没有任何风格的表”的唯一方法是使用没有任何可能影响它的CSS的表。

在您的代码中,您没有删除任何带有style元素的样式,而是添加样式。例如,在td元素上将填充设置为零会将渲染更改为常见(以及或多或少推荐)浏览器默认值。所以你会得到一个带风格的表

如果外部样式表包含可能影响表格或其后代的设置,则需要删除这些设置或link元素。

如果您真的打算询问如何渲染表格简单(即,使用简单的样式),就像看起来那样,那么它会被问到一个新问题,而你应该定义你认为“简单”的东西(这将超过工作的一半)。