Question

我正在使用AEM CMS，用户可以在富文本编辑器中构建表格。它工作得很好。我们的实现也使用bootstrap 3.1。 Bootstrap将td和th padding设置为0.这优先于系统根据用户的表组件设置设置的cellpadding。生成的HTML看起来像这样。在此示例中，用户对单元格填充的设置设置为4 ...

<div class="parbase table">
  <table width="100%" cellspacing="0" cellpadding="4" border="1">
    <tbody>
    <tr><td>Hello 1</td>
      <td>Hello2</td>
      <td>Hello3&nbsp;</td>
    </tr>
    <tr>
      <td>lsdvn dfijkn jsdvoi m orijojnl JDFIUJ</td>
      <td>adfbsk ik</td>
      <td>lsdvn dfijkn jsdvoi m orijojnl JDFIUJ</td>
    </tr>
    </tbody>
  </table>
</div>

使用Chrome Inspect Element我可以看到应用了Bootstrap规则。当我取消选中此规则时，表格cellpadding生效，并且td看起来很好。

td, th {
  padding: 0;
}

我尝试使用initial和unset删除规则，但都没有工作。

td, th {
  padding: initial; /* and unset */
}

我希望有一个css解决方案，不涉及更改生成表html的组件代码的实现。此外，由于我们使用CDN作为bootstrap css / js，我也不想自定义框架。

希望有一个CSS解决方案，以便可以取消设置/删除/删除/等等的bootstrap td和th padding规则。

Answer 1

您可以尝试添加更具体的规则，如果我没有弄错，将优先于任何不太具体的规则：

div.parbase td {
  padding: 4px;
}

如果这样做，您可以取出表格的cellpadding属性。

Answer 2

我建议使用jQuery cssText函数：

$("td, th").css("cssText", "padding: 0 !important;");

这将覆盖它之后的规则。

取消设置td填充

2 个答案: