【问题标题】:Adding a right border to the last table header column为最后一个表格标题列添加右边框
【发布时间】:2013-02-23 04:49:54
【问题描述】:

我需要你的帮助,

如何在表格的最后一列标题中添加一个border-right: 1px solid #808080?我不确定并坚持要修改或修复什么。

这是我的 CSS 和粘贴 Bin:http://pastebin.com/CEPVfd1z

CSS:

#wrapper {
        height: 150px;
        width: 800px;
        border: 1px solid #808080;
        position: relative;

        overflow-y: scroll;
        overflow-x: scroll;
        scrollbar-base-color: #DFDFDF;
        scrollbar-arrow-color: #235A81;

}
#data {
  border-collapse: collapse;
  border: 0;
  width: 800px;
}
#data th {
  border-left: 1px solid #808080;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
#data td {
  border: 1px solid #808080;
}
#data tr:first-child th {
  border-top: 0;
}
#data tr:last-child td {
  border-bottom: 0;
}
#data tr td:first-child,
#data tr th:first-child {
  border-left: 0;
}

【问题讨论】:

  • 您的表格没有完整的语法。我看不到 thead 或 tbody 标记。

标签: html css


【解决方案1】:

使用#data th:last-child 作为选择器,然后将border-right 属性添加到其中。看来你已经知道如何使用:first-child:last-child 选择器了,我就不解释了。

http://jsfiddle.net/KgXuN/

#data th:last-child {
    border-right: 2px solid red;
}

【讨论】:

  • @isherwood,很好的编辑。我喜欢保持清洁(不要太浓缩)。
  • 谢谢艾伯特。我在 Firefox 中看到它,但在 IE7 中没有,有解决方法吗?
  • 解决方法是放弃 IE7 并鼓励您的用户也这样做。 ;-)
猜你喜欢
  • 2014-06-30
  • 1970-01-01
  • 2015-09-22
  • 1970-01-01
  • 1970-01-01
  • 2020-03-27
  • 1970-01-01
  • 2012-08-27
  • 1970-01-01
相关资源
最近更新 更多