设置与 CSS 边框不冲突的表格边框答案

【问题标题】：Set a table border with no conflicts with CSS borders设置与 CSS 边框不冲突的表格边框
【发布时间】：2016-10-25 13:22:34
【问题描述】：

我只是想问你是否知道让表格边框设置摆脱“样式”(CSS) 的方法。如您所见，此“样式”设置，其边框固定为 1 像素。它看起来不错，但如果我更改“table”标签中的边框设置，它不会让它的边框更改为另一个像素。

我正在考虑在我的网站中应用CKEditor，它的表格插件会生成像table border='number that users pick'这样的内联源代码，但是一旦样式标签修复了它的边框像素，任何表格样式集都不会影响任何表格样式。

下面的源代码正是我希望它看起来的样子，除非它在更改表格样式设置时更改其边框大小。

你能帮我解决这个问题吗？起初看起来很简单，但事实证明这是像我这样的新手无法处理的事情。

    <style type="text/css">
            p { border-color:  blue; border-style: solid; margin: 1px; }
            p.b2 { border-width: 1px; border-color: rgb(199, 199, 199) ; }

            table, td {
                border:1px solid rgb(199, 199, 199);
                text-align: left;
            }


            table {
                border-collapse: collapse;
            }


    </style>


    <table border="1" cellpadding="0" cellspacing="0" style="width:500px;">
        <tbody>
            <tr>
                <td>a</td>
                <td>b</td>
            </tr>
            <tr>
                <td>c</td>
                <td>d</td>
            </tr>
            <tr>
                <td>e</td>
                <td>f</td>
            </tr>
        </tbody>
    </table>

【问题讨论】：

添加语言标签。

标签： html css html-table

【解决方案1】：

您可以应用一个简单的解决方案。如果 HTML 上不存在 border 属性，则只能应用 CSS 边框。

所以解决方法很简单。您可以使用:not() CSS 伪选择器来选择所有没有border 属性的表，因此您可以在括号内推入该属性（关闭[] 以告诉CSS 这是一个属性）。

让我举个例子：

table:not([border]) {
  border: 1px dotted red;
}

<table cellpadding="0" cellspacing="0" style="width:500px;">
  <tbody>
    <tr>
      <td colspan="2">Without border attribute</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
    </tr>
    <tr>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>e</td>
      <td>f</td>
    </tr>
  </tbody>
</table>
<div style="height: 20px;"></div>
<table border="5" cellpadding="0" cellspacing="0" style="width:500px;">
  <tbody>
    <tr>
      <td colspan="2">With border attribute</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
    </tr>
    <tr>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr>
      <td>e</td>
      <td>f</td>
    </tr>
  </tbody>
</table>

所以整个解决方案是：

table:not([border]) {
  border: 1px dotted red;
}

为没有边框属性的表格放置自己的样式。

【讨论】：