如何使用CSS覆盖HTML中的“rules”属性？

Question

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

我需要使用CSS样式来覆盖这个"rules"属性，虽然我可以在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中删除那些frame/border/rules属性。但在生产环境中我无法这样做。

- user349024

Answer 1

我已经快速尝试了一下<table frame="border" rules="all">。关键似乎是要用另一个边框来覆盖它，例如：

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

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

- Olly Hodgson

Answer 2

在文档加载时使用jQuery的removeAttr属性来完全删除旧属性。

api.jquery.com/removeAttr

- Banford

Answer 3

border-color 似乎已经生效了。

- reisio

---

请给出在Firefox中运行的示例。这在FF10中无法运行 - http://jsfiddle.net/ajcw/GYYHb/ - ajcw

border-color 在 Firefox 中作用于表格单元格时有效，但对表格本身无效。 - ajcw

这似乎是因为规则实际上并没有应用于表格，而是应用于其单元格。 - reisio

Answer 4

也许使用FireBug检查元素可以帮助您检测CSS属性，并允许您在Firefox中定位它（这里有说明）。

你能发布一些代码的例子吗？

- Xavi Esteve