CSS 删除 twitter bootstrap 中的行行
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8875367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove row lines in twitter bootstrap
提问by w00t
I'm using twitter bootstrap for some web app I'm forced to do (I'm not a web developer) and I can't find a way to disable the row lines for tables.
我正在将 twitter bootstrap 用于我被迫做的一些网络应用程序(我不是网络开发人员),但我找不到禁用表格行行的方法。
As you can see from the Bootstrap documentation, the default table style contains line rows.
从Bootstrap 文档中可以看出,默认表格样式包含行行。
Regards,
问候,
回答by Andres Ilich
Add this to your main CSS:
将此添加到您的主 CSS:
table td {
border-top: none !important;
}
Use this for newer versions of bootstrap:
将此用于较新版本的引导程序:
.table th, .table td {
border-top: none !important;
}
回答by dex412
In Bootstrap 3 I've added a table-no-border class
在 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;
}
回答by Spindle
bootstrap.min.css is more specific than your own stylesheet if you just use .table td. So use this instead:
如果你只使用 .table td,bootstrap.min.css 比你自己的样式表更具体。所以改用这个:
.table>tbody>tr>th, .table>tbody>tr>td {
border-top: none;
}
回答by honkskillet
This is what worked for me..
这对我有用..
.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;
}
Had to whip out the !important to make it stick.
不得不拿出 !important 让它坚持下去。
回答by Netsi1964
Got the same question from a friend. My suggestion which does not require !Important
looks like this: I add a custom class "no-border
" which can be added to the bootstrap table.
从朋友那里得到了同样的问题。我不需要的建议!Important
看起来像这样:我添加了一个自定义类“ no-border
”,它可以添加到引导表中。
.table.no-border tr td, .table.no-border tr th {
border-width: 0;
}
You can see my go at a solution here
回答by Juan Castellon
The other way around, if you have problems ADDING the lines to your panel dont forget to add the to your TABLE. By default (http://getbootstrap.com/components/#panels), it is suppose to add the line but It helped me to add the tag so now the row lines are shown.
反过来,如果您在将行添加到面板时遇到问题,请不要忘记将其添加到您的表格中。默认情况下(http://getbootstrap.com/components/#panels),假设添加了该行,但它帮助我添加了标签,因此现在显示了行行。
The following example "probably" wont display the lines between rows:
以下示例“可能”不会显示行之间的行:
<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>
The following example WILL display the lines between rows:
以下示例将显示行之间的行:
<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>