删除特定的td边框？

时间：2015-04-17 02:17:29

标签： html css

我想知道为什么在css .container中使用或不使用color: red;时正确渲染。代码背后会发生什么？如何在不删除.container的情况下实现第二张图片？

＆＃13;
＆＃13; 
.container table {
  border-collapse: collapse;
  border: solid 1px #000;
}
.container table td {
  border: solid 1px #000;
}
.no-border-right {
  border-right: solid 1px #FFF;
  color: red;
}
＆＃13; 
<div class="container">
  <table>
    <tr>
      <td class="no-border-right">One</td>
      <td>Two</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

Current Output Desired Output

6 个答案:

答案 0 :(得分：4)

你可以做到

.container table td.no-border-right {
        border-right: solid 1px #FFF;
        color: red;
 }

.container table td比.no-border-right

更具特异性

除非绝对必要，否则最好不要使用！important。首先尽可能在特异性规则范围内工作

结帐this guide和此calculator of specificity

答案 1 :(得分：0)

.no-border-right {
    border-right: solid 1px #FFF !important;
    color: red;
}

答案 2 :(得分：0)

只需使用border-right: solid 1px #FFF!important;

即可

＆＃13;
＆＃13; 
.container table {
  border-collapse: collapse;
  border: solid 1px #000;
}
.container table td {
  border: solid 1px #000;
}
.no-border-right {
  border-right: solid 1px #FFF!important;
  color: red;
}
＆＃13; 
<html>

<head>
  <title></title>
  <style type="text/css">
  </style>
</head>

<body>
  <div class="container">
    <table>
      <tr>
        <td class="no-border-right">One</td>
        <td>Two</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
      </tr>
    </table>
  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

CSS为具有父项的选择器提供更高的优先级，因此使文档中的顺序无效。

简单修复：替换您的＆＃34; .no-border-right＆＃34;选择器＆＃34; .container table td.no-border-right＆＃34;。

答案 4 :(得分：0)

这是Solution。

密钥css属性为border-collapse:collapse;。您可以阅读更多here。

table {
    border-collapse:collapse;
    border:1px solid black;
}
td {
    border-right:1px solid black;
    border-bottom:1px solid black;
}

.no-border-right{
    border-right:none;
}

答案 5 :(得分：0)

将丑小鸭变成天鹅

第1步 - 增加specificity

在.container之前放置.no-border-right会增加其specificity， 但 看起来很难看！看看这些丑陋的差距：

Ugly!

第2步 - 美化你的桌子

让我们更进一步，做到这一点：

Not Ugly!

为了消除这些差距，请试试：

  • 使用默认的border-collapse: separate
  • 使用border-spacing: 0删除单元格之间的默认间隙
  • 将顶部和左侧边框放在桌子上
  • 将右下边框放在单元格上
  • 删除.no-border-right 上的右边框和旁边单元格的左边框（以the adjacent selector +为目标）

工作示例

＆＃13;
＆＃13; 
.container table {
  border-spacing: 0;
  border-top: solid 1px #000;
  border-left: solid 1px #000;
}
.container table td {
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
}
.container .no-border-right {
  border-right: none;
  color: red;
}
.container .no-border-right + td {
  border-left: none;
}
＆＃13; 
<div class="container">
  <table>
    <tr>
      <td class="no-border-right">One</td>
      <td>Two</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题