Html 您可以使用内置类在引导程序中为表格添加背景颜色吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37602900/
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
Can you add a background color to a table in bootstrap with built in classes?
提问by DDJ
In twitter-bootstrap-3is there any way you can use a built in bootstrap color scheme? This code wouldn't work, and I have tried "Active" and "Success" for colors instead of background-color, but they didn't work.
在twitter-bootstrap-3中有什么方法可以使用内置的引导程序配色方案吗？这段代码不起作用，我已经尝试了颜色的“Active”和“Success”而不是background-color，但它们没有用。
<table class="table table-bordered background-color: white">
<thead>
<tr>
<th>example table</th>
</tr>
</thead>
</table>
回答by Brian Dillingham
Bootstrap has some built in Contextual backgroundswhich can be added to any element
Bootstrap 有一些内置的上下文背景，可以添加到任何元素
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<table class="table bg-primary"><tr><td>Hello</td></tr></table>
<table class="table bg-success"><tr><td>Hello</td></tr></table>
<table class="table bg-info"><tr><td>Hello</td></tr></table>
<table class="table bg-warning"><tr><td>Hello</td></tr></table>
<table class="table bg-danger"><tr><td>Hello</td></tr></table>Also, you're code example doesn't work because you're adding css in the classattribute vs the styleattribute.. should look like this instead
此外，您的代码示例不起作用，因为您在class属性与style属性中添加了 css .. 应该看起来像这样
<table class="table table-bordered" style="background-color: white">
回答by dippas
you can use .table-stripedclass, that makes zebra style.
你可以使用.table-striped类，这使得斑马风格。
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>OR
或者
if you want more than 2 colors you can use Contextual classes, which you can apply to tror td
如果您想要 2 种以上的颜色，您可以使用Contextual 类，您可以将其应用于tr或td
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="active">John</td>
<td class="success">Doe</td>
<td class="danger">[email protected]</td>
</tr>
<tr class="warning">
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>