blocks|key|460854|text|将边框设置为1px+double+red。1px宽的“双”边框看起来与“实体”边框相同，但在折叠边框计算中具有更高的优先级。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|460855|entityMap^0|6|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Set the border to <code>1px double red</code>. A 1px-wide "double" border looks identical to a "solid", but has higher precedence in collapsed border computation.</p>


blocks|key|675047|text|尝尝这个,|type|unstyled|depth|inlineStyleRanges|entityRanges|data|675048|.main-table+{
++++border-collapse:+collapse;
}
.left-border+{
border-left:+2px+solid+red+!important;
}|code-block|syntax|javascript|675049|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this,</p>

<pre><code>.main-table {
    border-collapse: collapse;
}
.left-border {
border-left: 2px solid red !important;
}
</code></pre>


blocks|key|460922|text|在CSS中，最具体的选择器优先于次要的选择器。例如，在您的示例中，.main-table+td优先于.left-border，因为前者更具体。要解决此问题，可以为边界替代指定：.main-table+td.left-border。这比使用!important更正确，也更好，因为它消除了进一步覆盖它的所有机会。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|460923|有关CSS选择器优先级的信息，请参阅此链接：http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/|460924|entityMap|0|LINK|mutability|MUTABLE|url|http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/^0|X|E|1E|C|2G|Q|3B|A|0|M|1X|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|H|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>In CSS the selector that is most specific takes precedence over the lesser specific ones. For example, in your case <code>.main-table td</code> takes precedence over <code>.left-border</code> since the former is more specific. To solve it, you can specify: <code>.main-table td.left-border</code> for the border override. This is more correct and better than using <code>!important</code> which eliminates all chances of overriding it further.</p>

<p>See this link for info on CSS selector precedence: <a href="http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/" rel="nofollow">http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/</a></p>


blocks|key|676175|text|我会选择anglimass，但对css做了一个更改：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|676176|td.left-border+{
border-left:+1px+double+red+!important;
}|code-block|syntax|javascript|676177|也就是说，选择器应该有额外的"td“|676178|(将2px边框编辑为1px+-这是一个错误！)|676179|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I would go with anglimass, but with one change to the css:</p>

<pre><code>td.left-border {
border-left: 1px double red !important;
}
</code></pre>

<p>That is, the selector should have the additional "td"</p>

<p>(Edited the 2px border to 1px - that was a mistake!)</p>


blocks|key|461037|text|嗯。这似乎取决于浏览器绘制单元格边框的顺序。我在IE8中尝试了上面的功能，看起来不错，但在FF和Chrome中不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|461038|然后，我尝试使用完全相同的标记，将左侧单元格的右边框改为红色。这一次它在IE中不起作用，但在FF和Chrome中起作用。|461039|如果您将右侧单元格的左边框设置为红色，同时将左侧单元格的右侧边框设置为红色，则它在所有这些单元格中都有效。|461040|<html+xmlns="http://www.w3.org/1999/xhtml">
<head>
<style+type="text/css">
.main-table
{
++++border-collapse:+collapse;
}
.main-table+td
{
++++margin:+0px;
++++padding:+0px;
++++border:+1px+solid+#aaa;
++++padding:+1px+4px+1px+4px;
}
.right-border
{
++++border-right:+1px+solid+red+!important;
}
.left-border
{
++++border-left:+1px+solid+red+!important;
}
</style>
<link+rel="stylesheet"+type="text/css"+href="style.css"+/>
</head>
<body>
++++<table+class='main-table'+cellspacing='0'+cellpadding='0'>
++++++++<tr>
++++++++++++<td>+1+</td>
++++++++++++<td>+366+</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td+class='right-border'>+2+</td>
++++++++++++<td+class='left-border'>+777+</td>
++++++++</tr>
++++</table>
</body>
</html>|code-block|syntax|javascript|461041|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Hmmm. It almost seems like this depends on the order in which the cell borders are drawn by the browser.  I tried the above in IE8 and it looked fine, but didn't work in FF or Chrome.</p>

<p>Then I tried making the right border of the left cell red instead, using the exact same markup.  This time it didn't work in IE but did work in FF and Chrome.</p>

<p>If you make both the left border of the right cell red and the right border of the left cell red, it works in all of them.</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
.main-table
{
    border-collapse: collapse;
}
.main-table td
{
    margin: 0px;
    padding: 0px;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
}
.right-border
{
    border-right: 1px solid red !important;
}
.left-border
{
    border-left: 1px solid red !important;
}
&lt;/style&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table class='main-table' cellspacing='0' cellpadding='0'&gt;
        &lt;tr&gt;
            &lt;td&gt; 1 &lt;/td&gt;
            &lt;td&gt; 366 &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class='right-border'&gt; 2 &lt;/td&gt;
            &lt;td class='left-border'&gt; 777 &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|675203|text|另一种解决方案，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|675204|http://jsfiddle.net/yPSVg/|offset|length|675205|​|675206|.main-table+{
++++border-collapse:+collapse;
}
.main-table+td+{
++++margin:+0px;
++++padding:+0px;
++++border:+1px+solid+#aaa;
++++padding:+1px+4px+1px+4px;
}
.left-border+{
++++border-left:+1px+solid+red+!important;
}
.right-border+{
++++border-right:+1px+solid+red+!important;
}|code-block|syntax|javascript|675207|<table+class='main-table'+cellspacing='0'+cellpadding='0'>
++<tr>
++++++<td>+1+</td>
++++++<td>+366+</td>
++</tr>
++<tr>
++++++<td+class="right-border">+2+</td>
++++++<td+class='left-border'>+777+</td>
++</tr>
</table>|675208|675209|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|C]]]]

<p>another solution,</p>

<p><a href="http://jsfiddle.net/yPSVg/" rel="nofollow noreferrer">http://jsfiddle.net/yPSVg/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.main-table {
    border-collapse: collapse;
}
.main-table td {
    margin: 0px;
    padding: 0px;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
}
.left-border {
    border-left: 1px solid red !important;
}
.right-border {
    border-right: 1px solid red !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class='main-table' cellspacing='0' cellpadding='0'&gt;
  &lt;tr&gt;
      &lt;td&gt; 1 &lt;/td&gt;
      &lt;td&gt; 366 &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="right-border"&gt; 2 &lt;/td&gt;
      &lt;td class='left-border'&gt; 777 &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|675117|text|collapse值表示边框将在可能的情况下折叠为单个边框。您希望对border-collapse属性使用separate。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|675118|此外，还有两个结束的</head>标记。|675119|entityMap^0|0|8|X|F|1G|8|0|A|7|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

<p>The <code>collapse</code> value means borders are collapsed into a single border when possible.
You want to use <code>separate</code> for the <code>border-collapse</code> property.</p>

<p>Also, You have two closing <code>&lt;/head&gt;</code> tags.</p>


<p>How can I make left border of the cell red? Why this does not work? Thanks!!</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
.main-table {
    border-collapse: collapse;
}
.main-table td {
    margin: 0px;
    padding: 0px;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
}
.left-border {
border-left: 1px solid red !important;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
</code></pre>

<p>Shouldn't left-border override the color specified on .main-table td?</p>

<pre><code>&lt;table class='main-table' cellspacing='0' cellpadding='0'&gt;
&lt;tr&gt;
    &lt;td&gt; 1 &lt;/td&gt;
    &lt;td&gt; 366 &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td &gt; 2 &lt;/td&gt;
    &lt;td class='left-border'&gt; 777 &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


Why html table cell's border color does not change?

怎样才能使单元格的左边框变红？为什么这不起作用？谢谢！！<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">.main-table {    border-collapse: collapse;}.main-table td {    margin: 0px;    padding: 0px;    bor

问为什么html表格单元格的边框颜色不变？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么html表格单元格的边框颜色不变？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么html表格单元格的边框颜色不变？
EN