Html 没有条纹/边框的引导表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18075794/
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
Bootstrap table without stripe / borders
提问by Romain
I'm kinda stuck with a CSS problem while using Bootstrap. I'm also using Angular JS with Angular UI.bootstrap (which might be part of the problem).
我在使用 Bootstrap 时遇到了 CSS 问题。我还将 Angular JS 与 Angular UI.bootstrap 一起使用（这可能是问题的一部分）。
I'm making a website that displays data in a table. Sometime, the data contains object that I have to display in tables. So I want to put borderless tables inside a normal table while keeping inside separation lines for the borderless tables.
我正在制作一个在表格中显示数据的网站。有时，数据包含我必须在表格中显示的对象。因此，我想将无边界表格放在普通表格中，同时保留无边界表格的分隔线。
But it seems that even if I specifically say to not show the borders on a table, it is forced:
但似乎即使我特意说不要在表格上显示边框，也是被迫的：
HTML:
HTML：
<table class='table borderless'>
CSS:
CSS：
.borderless table {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom-style: none;
}
So here, what I want is just the inside borders.
所以在这里，我想要的只是内部边界。
回答by Davide Pastore
Using Bootstrap 3.2.0 I had problem with Brett Henderson solution (borders were always there), so I improved it:
使用 Bootstrap 3.2.0 我遇到了 Brett Henderson 解决方案的问题（边界总是在那里），所以我改进了它：
HTML
HTML
<table class="table table-borderless">
CSS
CSS
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
border: none;
}
回答by Brett Henderson
The border styling is set on the tdelements.
边框样式设置在td元素上。
html:
html：
<table class='table borderless'>
css:
css：
.borderless td, .borderless th {
border: none;
}
Update:Since Bootstrap 4.1 you can use .table-borderlessto remove the border.
更新：自 Bootstrap 4.1 起，您可以使用.table-borderless删除边框。
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
https://getbootstrap.com/docs/4.1/content/tables/#borderless-table
回答by Sam Jones
similar to the rest, but more specific:
与其他类似，但更具体：
table.borderless td,table.borderless th{
border: none !important;
}
回答by Martin Bean
Don't add the .tableclass to your <table>tag. From the Bootstrap docs on tables:
不要将.table类添加到您的<table>标签中。来自表格上的 Bootstrap 文档：
For basic styling—light padding and only horizontal dividers—add the base class
.tableto any<table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
对于基本样式——轻量填充和仅水平分隔线——将基类添加
.table到任何<table>. 这可能看起来非常多余，但考虑到其他插件（如日历和日期选择器）广泛使用表格，我们选择隔离我们的自定义表格样式。
回答by Max
Since Bootstrap v4.1 you can add table-borderlessto your table, see official documentation:
从 Bootstrap v4.1 开始，您可以添加table-borderless到您的表中，请参阅官方文档：
<table class='table table-borderless'>
回答by Daniel C. Deng
In my CSS:
在我的 CSS 中：
.borderless tr td {
border: none !important;
padding: 0px !important;
}
In my directive:
在我的指令中：
<table class='table borderless'>
<tr class='borderless' ....>
I didn't put the 'borderless' for the td element.
我没有为 td 元素放置“无边界”。
Tested and it worked! All the borders and paddings are completely stripped off.
经过测试，它奏效了！所有边框和填充都被完全剥离。
回答by shellco
I expanded the Bootstrap table styles as Davide Pastore did, but with that method the styles are applied to all child tables as well, and they don't apply to the footer.
我像 Davide Pastore 一样扩展了 Bootstrap 表格样式，但是使用这种方法，样式也适用于所有子表格，而它们不适用于页脚。
A better solution would be imitating the core Bootstrap table styles, but with your new class:
更好的解决方案是模仿核心 Bootstrap 表格样式，但使用您的新类：
.table-borderless>thead>tr>th
.table-borderless>thead>tr>td
.table-borderless>tbody>tr>th
.table-borderless>tbody>tr>td
.table-borderless>tfoot>tr>th
.table-borderless>tfoot>tr>td {
border: none;
}
Then when you use <table class='table table-borderless'>only the specific table with the class will be bordered, not any table in the tree.
然后当你<table class='table table-borderless'>只使用带有类的特定表时，树中的任何表都不会被加边框。
回答by Don Escobar
I know this is an old thread and that you've picked an answer, but I thought I'd post this as it is relevant for anyone else that is currently looking.
我知道这是一个旧线程并且您已经选择了一个答案，但我想我会发布它，因为它与当前正在寻找的其他人相关。
There is no reason to create new CSS rules, simply undo the current rules and the borders will disappear.
没有理由创建新的 CSS 规则，只需撤消当前规则，边框就会消失。
.table>tbody>tr>th,
.table>tbody>tr>td {
border-top: 0;
}
going forward, anything styled with
前进，任何风格的
.table
will show no borders.
将不显示边框。
回答by Danield
Try this:
尝试这个：
<table class='borderless'>
CSS
CSS
.borderless {
border:none;
}
Note: What you were doing before was not working because your css code was targeting a table within your .borderless table (which probably didn't exist)
注意：您之前所做的工作不起作用，因为您的 css 代码针对的是 .borderless 表中的表（可能不存在）
回答by Steffo Dimfelt
Use the border-class from Boostrap 4
使用border-Boostrap 4 中的类
<td class="border-0"></td>
or
或者
<table class='table border-0'></table>
Be sure to end the class input with the last change you want to do.
确保以您要进行的最后更改结束类输入。
