Question

我有一个需要更改边框颜色的HTML表格。我无法弄清楚。

HTML

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Conditions</th>
            <th>Characteristics</th>
        </tr>
    </thead>
    <tbody>
        <tr class="zebra-stripe">
            <td class="first-field">Element</td>
            <td>version}</td>
            <td></td>
        </tr>
        <tr>
            <td class="first-field">ApplicationTransactionID</td>
            <td>string, up to 64 chars, Optional</td>
            <td>A number assigned by the calling application to uniquely identify this request.</td>
        </tr>
    </tbody>
</table>

CSS

/* Global CSS */


table {
    border-color: red;
}

tr {
    border-color: red;
}

td {
    border-color: red;


/* Table CSS */

.zebra-stripe {
    border-color: red;
    background: #002D38;
    border: solid;
    border-width: 1px;
}

.zebra-stripe table {
    border-color: red;
}

.zebra-stripe tr {
        border-color: red;
}

.zebra-stripe td {
        border-color: red;
}

我甚至试图用内联样式更改边框颜色。仍然没有运气！它在Chrome或Safari中无效。边框只是灰色，而且来自用户代理样式表。我错误地针对它吗？我以10种不同的方式将其定位。 CSS类应该足够了。我可以很好地改变边框样式或边框宽度，但我无法改变颜色。但最多，定位表行也应该足够了。

无法理解出了什么问题。

Answer 1

您还没有定义其余的边框属性。您可以使用：

table {
  border: 1px solid red;
}

（border-width，border-style和border-color）

而不是

table {
  border-color: red;
}

FIDDLE

另外，关于您当前的CSS的说明，您已将.zebra-stripe作为一个类添加到tr，但CSS指出.zebra-stripe table和.zebra-stripe tr，这意味着它是＆＃39;以table

类为目标，定位父级内tr或.zebra-stripe

<强>更新要解释一下，有2个问题，1个是你忘了关闭这个

tr {
  border-color: red;
}

td {
  border-color: red;
  <------ //no '}' tag

这使.zebra-stripe无法工作。其次，.zebra-stripe有以下问题：

.zebra-stripe
  border-color: red;
  background: #002D38;
  border: solid; <------ this should be 'border-style', 'border' is overwriting the others
  border-width: 1px;

Answer 2

我的许多不小心的错误让我感到惊讶。非常慌乱，在黑暗中做了很多事情，看看是否有效。

HTML

                <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Conditions</th>
                        <th>Characteristics</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="row-edge">
                        <td class="first-field">Element</td>
                        <td>version}</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td class="first-field">ApplicationTransactionID</td>
                        <td>string, up to 64 chars, Optional</td>
                        <td>A number assigned by the calling application to uniquely identify this request.</td>
                    </tr>
                </tbody>
            </table>

CSS

.row-edge {
    border-top: 1px solid #0A454F;
    border-bottom: 1px solid #0A454F;
}

更改了一些颜色和标签。但这正是我所需要的。

再次感谢！

HTML表格边框：用户代理样式表覆盖CSS？

2 个答案: