Question

如何让细胞的左边框变红？为什么这不起作用？谢谢！

<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;
}
.left-border {
border-left: 1px solid red !important;
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

左边框不应覆盖.main-table td？

上指定的颜色

<table class='main-table' cellspacing='0' cellpadding='0'>
<tr>
    <td> 1 </td>
    <td> 366 </td>
</tr>
<tr>
    <td > 2 </td>
    <td class='left-border'> 777 </td>
</tr>
</table>

</body>
</html>

Answer 1

将边框设置为1px double red。 1px宽的“双”边框看起来与“实心”相同，但在折叠边框计算中具有更高的优先级。

Answer 2

试试这个，

.main-table {
    border-collapse: collapse;
}
.left-border {
border-left: 2px solid red !important;
}

Answer 3

在CSS中，最具体的选择器优先于较小的特定选择器。例如，在您的情况下，.main-table td优先于.left-border，因为前者更具体。要解决此问题，您可以为边框覆盖指定：.main-table td.left-border。这比使用!important更正确，更好，这消除了进一步覆盖它的所有机会。

有关CSS选择器优先级的信息，请参阅此链接：http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 4

我会选择anglimass，但是对css进行了一次更改：

td.left-border {
border-left: 1px double red !important;
}

也就是说，选择器应该有额外的＆＃34; td＆＃34;

（编辑2px边框到1px - 这是一个错误！）

Answer 5

嗯。看起来这几乎取决于浏览器绘制单元格边框的顺序。我在IE8中尝试了上述内容，看起来很好，但在FF或Chrome中无效。

然后我尝试使用完全相同的标记，将左侧单元格的右边框改为红色。这次它在IE中不起作用，但在FF和Chrome中都有效。

如果您将右侧单元格的左边框和左侧单元格的右边框都设置为红色，则它将适用于所有这些边框。

<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>

Answer 6

另一种解决方案，

http://jsfiddle.net/yPSVg/

.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;
}

<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>

Answer 7

collapse值表示边框尽可能折叠为单个边框。您希望将separate用于border-collapse属性。

此外，您还有两个结束</head>标记。

为什么html表格单元格边框颜色不会改变？

7 个答案: