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

【问题标题】：Remove border of one cell in Bootstrap Table删除引导表中一个单元格的边框
【发布时间】：2018-07-18 13:39:58
【问题描述】：

我想只删除引导表中一个单元格的边框。我试过在那个特定的单元格上加上一个 id 并在我的 css 中放置：

#borderless-cell { border: 0; }

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

【问题讨论】：

问题是，您还需要删除周围单元格周围的边框才能生效
您可以通过单击 chrome 浏览器上的“检查元素”来调试在第一个单元格上应用的样式。

标签： html css angular twitter-bootstrap angular-ui-bootstrap

【解决方案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; }

【讨论】：