Boostrap CSS-更改表格边框颜色
[英]Boostrap CSS - Change Table Border Colors
问题描述
How can I also change the column borders in a HTML Table using Bootstrap CSS? 
我还如何使用Bootstrap CSS更改HTML表中的列边框？
This is where I have gone so far: 到目前为止，这是我去过的地方：
Boostrap Pre-Defined Table Boostrap预定义表
The table lays inside a jumbotron and I would like to change the table borders and lines so It can be more distinguishable. 桌子放在巨大的飞机内，我想更改桌子的边框和线条，这样可以更容易区分。 This is where I have gone so far. 这是我到目前为止所去的地方。
As you can see, the table lines between columns remain the same. 如您所见，列之间的表行保持不变。 How can this be changed? 如何更改？
Any other suggestions on improving the Table Appearance are gratefully accepted 如有其他关于改善桌子外观的建议，我们将不胜感激
table.html table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>Employees</h2>
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
table.css table.css
.jumbotron{
margin-top:250px
}
tr {
border: 3px solid gray;
}
4 个解决方案
解决方案1
3 已采纳 2017-08-17 23:07:59
Try this 尝试这个
.jumbotron .table-bordered tbody tr { border: 3px solid gray; } .jumbotron .table-bordered tbody tr td { border: 3px solid gray; } .jumbotron .table-bordered tbody tr { border: 3px solid gray; } .jumbotron .table-bordered thead tr { border: 3px solid gray; } .jumbotron .table-bordered thead tr th { border: 3px solid gray; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h2>Employees</h2> <div class="row"> <div class="col-md-12"> <div class="pull-right"> <button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button> </div> </div> </div> <br> <table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </div> </body>
解决方案2
2 2017-08-17 23:06:47
Add border left & right to td & th : 添加border left和right ，以td ＆ th ：
table td ,table th{
border-left: 3px solid gray !important;
border-right: 3px solid gray !important;
}
table td:first-child {
border-left: none;
}
table td:last-child {
border-right: none;
}
解决方案3
2 2017-08-18 00:17:32
The reason why you are not being able to set column border is because of the CSS specificity . 之所以无法设置列边框，是因为CSS的特殊性 。 Your rule is being overridden by more specific rules, the most specific one for <td> in your case is .table-bordered>tbody>tr>td which is set by the Bootstrap. 您的规则已被更具体的规则所.table-bordered>tbody>tr>td ，您所用的<td>最具体的规则是由Bootstrap设置的.table-bordered>tbody>tr>td 。 You have couple of options to how to deal with this situation: 对于如何处理这种情况，您有几种选择：
Use more specific rule 使用更具体的规则
Write rule that will override the one set by Bootstrap, for example: 编写将覆盖Bootstrap设置的规则，例如：
HTML 的HTML
<table id="employees-table" class="table table-bordered">
...
</table>
CSS 的CSS
#employees-table td,
#employees-table th
{
border: 3px solid gray;
}
Use !important exception 使用！important异常
Using !important is considered to be a bad practise, but for your case it might be the most quickest/easiest solution: 使用！important被认为是不好的做法，但对于您而言，这可能是最快/最简单的解决方案：
table td,
table th
{
border: 3px solid gray !important;
}
解决方案4
1 2017-08-17 23:08:30
.table-bordered td, .table-bordered th {
border: 3px solid gray !important;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.