删除Twitter Bootstrap中的行

72

我在某些我必须执行的Web应用程序中使用了Twitter Bootstrap（我不是Web开发人员），我找不到禁用表行的方法。

从Bootstrap文档中可以看到，默认的表格样式包含行。

问候，

css twitter-bootstrap

— w00t
source

1

试图找不到任何明显的东西，没有任何元素涉及使用任何css类。

— w00t 2012年

124

将此添加到您的主要CSS：

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

将此用于较新版本的引导程序：

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

— 安德烈斯·伊里奇（Andres Ilich）
source

对我不起作用。我将其放在html / head / style部分中，但chrome通过删除线将其显示出来，就好像没有使用它一样。有任何想法吗？

— Martin Wickman

3

@MartinWickman这个答案是为引导程序的早期版本编写的（当时只有一点），因此此方法要求!important规则起作用，但是您可以通过使选择器更具体一些来避免该问题，例如： .table th, .table td { border-top: none; }

— Andres Ilich

47

不要全局覆盖这样的样式。使用新的CSS类，而不是覆盖所有表的默认类。 .table-borderless td, .table-borderless th { border: 0; }来自coderwall.com/p/hfurca

— 彼得·戴维斯

5

@AndresIlich-正确-引导程序为所有表设置默认样式。我之所以投票，是因为在全球范围内覆盖是一个坏主意。您将对应该有边框的表造成意想不到的后果。

— 彼得·戴维斯

4

@AndresIlich我认为PeterDavis想要说的不是代替覆盖全局样式，而是应该在目标对象表中添加无边界类，并相应地设置样式。我认为dex412的回答正好表达了他的意思。不明白为什么您坚持认为压倒一切的全局变量是这里唯一的解决方案。

— maryisdead 2014年

51

在Bootstrap 3中，我添加了一个表格无边框类

.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; 
}

— dex412
source

4

这个解决方案对我有用，而其他解决方案则不行（包括此处的解决方案）。通过bootstrap-sassin Rails使用Bootstrap 3 。

— 丹尼斯

1

就我而言，它不起作用。我使用的是响应式表格，并将其类（.table-responsive）修改为无边框。

— ArCiGo 2015年

15

bootstrap.min.css如果只使用.table td，则比您自己的样式表更具体。所以改用这个：

.table>tbody>tr>th, .table>tbody>tr>td {
    border-top: none;
}

— 主轴
source

我不得不做类似的事情来只针对几个单元格：.table > tbody > tr > td.no-line { border-top: none; }

— JoshP 2014年

与班级路口选择器一起，这对我很有帮助。谢谢

— nemesisfixx 2014年

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; 
}

不得不鞭打！重要使它坚持。

— honkskillet
source

它正在工作，但不像以前那样工作 !important

— vamsikrishnamannem

0

从朋友那里得到了同样的问题。我不需要的建议!Important如下：我添加了一个自定义类“ no-border”，可以将其添加到引导表中。

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

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

— 内西1964
source

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>

— 胡安·卡斯特利翁
source