Question

我需要更改我构建的表的边框属性，但我在内容管理系统后面操作，不允许我编辑样式表，只编辑页面的HTML。

所以我能够使用<table style="....">来操作一些表属性，但是当我使用border属性时，它只影响外边框而不影响单个单元格之间存在的边界。

显然我可以将HTML规则添加到<table>标记，即<table border="1px">，但这些不会覆盖影响边框的外部样式表，因此我需要一个内联CSS解决方案。

真正改变单元格间边界的唯一方法是手动为每个td添加边框属性，还是我错过了什么？

感谢您的帮助，

Answer 1

您是否试图覆盖外部样式表？如果您的内联CSS不起作用，您可能想尝试使用 -

!important

所以你可以这样做 -

<table style="border: none!important;">

Answer 2

“真正改变单元格边界的唯一方法是手动为每个td添加边框属性......？”

是。

除非您可以添加样式标记：

<style>
table td {...}
</style>

当然，总有JavaScript。 jQuery：

$('table td').css('border', '1px solid red');

Answer 3

由于您可以使用html，因此您可以插入样式表并定位td元素您应该添加一个类以避免弄乱页面中的其他表

<table class="some-class">..

和

<style type="text/css">
  table.some-class td{
      border:1px solid black;
  }
</style>

Answer 4

我还没有找到一个真正的在线解决方案，但scoped HTML5属性非常接近。

特别是，使用此功能，您不必为表创建新的ID /类，并希望它不会与其他任何内容发生冲突。

示例：

<table>
    <style scoped>td {padding:1px;}</style>
    <tr>
        <td>0</td>
        <td>1</td>
    </tr>
</table>

不幸的是，在撰写本文时，它只受Firefox支持。

Answer 5

<style>
table { border: 1px solid red; }
td { border: 1px solid red; }
</style>
<table border="1" cellpadding="2" cellspacing="0" width="50%">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>

仅使用内联css操作表格中的单元格边框

5 个答案: