不需要的CSS边框样式(DataTables标头)

前端之家收集整理的这篇文章主要介绍了不需要的CSS边框样式(DataTables标头)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我的CSS技能仍然缺乏,所以提前道歉.我正在使用DataTables jQuery插件处理页面.在我桌子的标题上,我有一个我试图删除的边框样式.

我过分夸大了效果,让我明白我所说的……

这是现在的样子……

enter image description here

这就是我想要的样子……

enter image description here

这是有问题的页面……

https://darkjedi.org/club/FOX/members/mwo_stats.php

我希望它只是一个扁平的黑色垂直线.

编辑:最初我把这误认为是阴影问题,我已经意识到这是一个边界式的问题.

最佳答案
解决了这个问题:

>删除右边框
>使相对定位
>添加绝对定位的黑色条并使其成为移除边框的宽度(via :: after)
>将绝对定位的黑条固定在单元格的右侧,使其成为边框
>调整排序箭头的背景位置,使它们从右侧细胞壁正确偏移

table.dataTable.compact thead th {
  padding-right: 25px;
  border-right: none;
  position: relative;
}

table.dataTable.compact thead th::after {
  content: '';
  width: 5px;
  height: 100%;
  background: black;
  position: absolute;
  right: 0;
  top:0;
}

table.dataTable thead .sorting,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc {
  background-position: calc(100% - 5px) 50% !important;
}

enter image description here

enter image description here

原文链接:https://www.f2er.com/css/427021.html

猜你在找的CSS相关文章