如何使用 CSS 覆盖 HTML“规则”属性？答案

【问题标题】：How can I override an HTML "rules" attribute using CSS?如何使用 CSS 覆盖 HTML“规则”属性？
【发布时间】：2011-02-23 06:30:37
【问题描述】：

当发布到 HTML 时，DITA Open Toolkit 会自动添加一些内联表格属性，包括 frame="border" 和 rules="all"。

我需要使用单元格的 CSS 样式来覆盖这个“规则”属性，虽然我可以在 IE 和 Chrome 中获得所需的结果，但 Firefox 会在表格中放置纯黑色网格线并且拒绝让步。

显然我无法编辑 HTML，公司政策是不编辑 XSLT，那么我如何仅使用 CSS 删除这些网格线？

我尝试了各种巧妙的border-xxxxxx 样式组合，并给它们！important 声明无效。

HTML 说...

<table cellpadding="4" cellspacing="0" frame="border" border="1" rules="all">
 <thead>
    <tr>
      <th class="cellrowborder">Type </th>
      <th class="cellrowborder">Comment </th>
    </tr>
 </thead>
   <tbody>
    <tr>
      <td class="cellrowborder">Caution </td>
      <td class="cellrowborder">Think twice. </td>
    </tr>
    <tr>
      <td class="cellrowborder">Attention </td>
      <td class="cellrowborder">Be careful. </td>
    </tr>
    <tr>
      <td class="cellrowborder">Danger </td>
      <td class="cellrowborder" >Be scared. Be very scared. </td>
    </tr>
   </tbody>
</table>

CSS 说

table {border: 1px solid black;
 font-family: Arial, Helvetica, sans-serif; 
 border-collapse: collapse; 
 font-size: 9pt;
 margin-top: 1em;
 margin-bottom: 1em;
 padding: 4px;}

tr {border: none;}

.cellrowborder {border: none;}

因此，虽然它在 IE 中看起来像我期望的那样，但在 Firefox 中却没有，除非我删除了 HTML 中的那些框架/边框/规则属性。我不能在生产中。

【问题讨论】：

标签： html css dita dita-ot

【解决方案1】：

也许使用 FireBug Inspect Element 可以帮助您检测 CSS 属性并允许您在 Firefox 中定位它 (instructions here)。

你能发布一个代码示例吗？

【讨论】：

【解决方案2】：

在文档加载时使用 jQuery 的 remove 属性将旧的属性一起删除。

api.jquery.com/removeAttr

【讨论】：

【解决方案3】：

border-color 似乎适用。

【讨论】：

请举一个在 Firefox 中工作的例子。这在 FF10 中没有 - jsfiddle.net/ajcw/GYYHb
所以 border-color 在应用于表格单元格时在 Firefox 中有效，但不适用于表格本身。
看起来如此，可以说是因为规则实际上并未应用于表格，而是应用于其单元格。

【解决方案4】：

我玩过<table frame="border" rules="all">。关键似乎是用另一个边框覆盖它，例如：

table {
    border: none;
    border-collapse: collapse;
}
    td {
        border: 1px solid silver;
    }

如果您需要完全删除边框，这并不理想，但我想您可以将border-color 与页面背景匹配？

【讨论】：