logo标签列表

移除 Twitter Bootstrap 中的行线

csstwitter-bootstrap
73
我正在使用 Twitter Bootstrap 进行一些 Web 应用程序的开发（我不是 Web 开发人员），但我找不到一种方法来禁用表格的行线。
如您所见，Bootstrap 文档 中默认的表格样式包含行线。
敬礼，
1
尝试过了，没有发现任何明显的东西，这些元素都没有使用任何CSS类。 - w00t
7个回答
125

在主CSS文件中添加以下内容：

table td {
    border-top: none !important;
}

对于较新版本的Bootstrap，请使用此方法：

.table th, .table td { 
     border-top: none !important; 
 }
3
@MartinWickman 这个答案是为早期版本的引导程序（在那个时候是1.x）编写的，所以这种方法需要使用!important规则才能工作，但是你可以通过使选择器更加具体来避免这种情况，就像这样： .table th, .table td { border-top: none; } - Andres Ilich
48
不要像这样全局覆盖样式。使用一个新的CSS类，而不是覆盖所有表格的默认值。可以使用 .table-borderless td, .table-borderless th {border: 0;} 。来自http://coderwall.com/p/hfurca - Peter Davis
5
@AndresIlich - 对的——Bootstrap为所有表格设置了默认样式。我投反对票是因为在全局级别覆盖它是一个糟糕的想法。这将会对应该有边框的表格造成意外后果。 - Peter Davis
@PeterDavis，你没有理解，我同意全局样式不应该被使用，但是根据问题描述，这是“唯一”的解决方法。这个“问题”在后来的Bootstrap版本中得到了解决，它使用类而不是直接添加样式到table规则。再说一遍，这行代码直接来自Bootstrap的样式表，在语义上可能有些问题，但在那个环境下这是唯一的解决方法。 - Andres Ilich
4
我认为PeterDavis的意思是，他不想覆盖全局样式，而是希望为他要定位的表格添加一个“无边框”类，并对其进行相应的样式设置。我认为dex412的回答完美地表达了他的意思。我不明白为什么你坚持认为在这里覆盖全局样式是唯一的解决方案。 - maryisdead
显示剩余2条评论
51

在 Bootstrap 3 中，我添加了一个 table-no-border 类。

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td {
  border-top: none; 
}
4
这个解决方案对我有效，而其他方案没有用（包括这里的解决方案）。我在Rails中使用bootstrap-sass通过Bootstrap 3实现。 - Dennis
1
在我的情况下，它不起作用。我正在使用一个响应式表格，并修改了它的类（.table-responsive）以去掉边框。 - ArCiGo
15

如果你只使用`.table td`，那么`bootstrap.min.css`比你自己的样式表更具体。因此，请改用以下内容：

```html .table tbody tr td ```
.table>tbody>tr>th, .table>tbody>tr>td {
    border-top: none;
}
我必须做类似的事情来仅针对几个单元格进行操作：.table > tbody > tr > td.no-line { border-top: none; } - JoshP
这个与类交集选择器一起使用，完美解决了我的问题。谢谢。 - JWL
2

这是我所做的，可以解决问题...

.table-no-border>thead>tr>th, 
.table-no-border>tbody>tr>th, 
.table-no-border>tfoot>tr>th, 
.table-no-border>thead>tr>td, 
.table-no-border>tbody>tr>td, 
.table-no-border>tfoot>tr>td,
.table-no-border>tbody,
.table-no-border>thead,
.table-no-border>tfoot{
  border-top: none !important; 
  border-bottom: none !important; 
}

为使其生效，必须使用 !important。

它能工作，但不像使用 !important 那样有效。 - vamsikrishnamannem
0

我从一个朋友那里得到了同样的问题。我的建议不需要!Important，看起来像这样：我添加了一个自定义类"no-border"，可以添加到Bootstrap表格中。

.table.no-border tr td, .table.no-border tr th {
  border-width: 0;
}

你可以在这里看到我尝试的解决方案

0

如果您只有一两个表格需要删除线条，可以使用快速而简单的方法：在每个表格中的每个<th>和/或<td>标签上应用“style =”border-top: none;“。
表头：

<th style="border-top: none;">

Table data:

<td style="border-top: none;">
0
另一方面，如果您在将行添加到面板时遇到问题，请不要忘记将 添加到您的表格中。 默认情况下（http://getbootstrap.com/components/#panels），它应该添加该行，但是我添加了 标签后，现在行线显示出来了。
以下示例“可能”不会显示行之间的线条：
<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <!-- Table -->
    <table class="table">
        <tr><td> Hi 1! </td></tr>
        <tr><td> Hi 2! </td></tr>
    </table>
</div>

下面的示例将显示行之间的内容：

<div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <!-- Table -->
    <table class="table">
        <thead></thead>
        <tr><td> Hi 1! </td></tr>
        <tr><td> Hi 2! </td></tr>
    </table>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接