删除引导表中一个单元格的边框

Posted 2023-03-05

【中文标题】删除引导表中一个单元格的边框

【英文标题】：Remove border of one cell in Bootstrap Table

【发布时间】：2018-07-18 13:39:58

【问题描述】：

我想只。我试过在那个特定的单元格上加上一个 id 并在我的 css 中放置：

#borderless-cell  border: 0;  

这似乎不起作用。有什么想法吗？

【问题讨论】：

问题是，您还需要删除周围单元格周围的边框才能生效

您可以通过单击 chrome 浏览器上的“检查元素”来调试在第一个单元格上应用的样式。

【参考方案1】：

试试这个：

#borderless-cell  border: none!important;  

【参考方案2】：

Bootstrap 4 具有内置的实用程序类，可能会有所帮助： https://getbootstrap.com/docs/4.0/utilities/borders/

文档中的示例：

<span class="border-0"></span>

您还可以查看用于使边框 0 工作的 CSS，以获得用纯 CSS 回答您的问题的提示。

【参考方案3】：

请使用这个。

改变这个：<table class="table table-hover table-bordered">

对此：<table class="table table-hover">

然后添加这个css：

.table 
  border: 1px solid #dddddd;

但是，如果您想按照自己的方式进行操作，则 css 是：

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td 
  border: 1px solid #dddddd;
  border-right-width:0px;
  border-left-width:0px;

演示：http://jsbin.com/IbebIpob/2/edit

【参考方案4】：

#borderless-cell  border: 1px solid Transparent!important;  

使边框对该特定单元格透明

【参考方案5】：

用透明边框隐藏

#borderless-cell  border: 10px solid transparent;