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

Question

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

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

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

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

谢谢你的帮助，

Answer 1

我还没有找到真正的内联解决方案，但scopedHTML5 属性非常接近。

特别是，使用此功能，您不必为表发明一个新的 ID/类，并希望它不会与其他任何东西冲突。

例子：

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

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

2019 年编辑：后来在采用之前被放弃的功能：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/scoped ，现在标记为“过时”

Answer 2

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

!important

所以你可以做这样的事情 -

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

Answer 3

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

是的。

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

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

当然，总是有 JavaScript。jQuery：

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

Answer 4

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

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

和

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

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>