Bootstrap CSS - 更改表格边框颜色
Posted
技术标签:
【中文标题】Bootstrap CSS - 更改表格边框颜色【英文标题】：Boostrap CSS - Change Table Border Colors 【发布时间】：2018-01-26 12:25:33 【问题描述】：如何使用 Bootstrap CSS 更改 html 表格中的列边框？
这是我到目前为止所到过的地方：
Boostrap 预定义表
表格位于一个大屏幕内，我想更改表格的边框和线条，以便更容易区分。这就是我到目前为止所到过的地方。
如您所见，列之间的表格行保持不变。怎么改？
任何其他关于改善表格外观的建议都非常感谢
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
.jumbotron
margin-top:250px
tr
border: 3px solid gray;
代码现在位于JsFiddle。
【问题讨论】：
【参考方案1】：将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;
【讨论】：
感谢@Omi 的回答【参考方案2】：试试这个
.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>【讨论】：
非常感谢@Jcode，您的回答可能会被接受。如何在 sn-p 中添加 JSFiddle？我试图在帖子上做到这一点，但没有运气 没问题！使用下面的代码，我能够生成代码 sn-p。<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> //code here <!-- end snippet --> 确保代码缩进至少四个空格或使用 CTRL+K 自动缩进。抱歉，如果这篇文章难以阅读，我在移动设备上大声笑。【参考方案3】：
.table-bordered td, .table-bordered th
border: 3px solid gray !important;
【讨论】：
请提供更多关于您的答案的详细信息，这将对未来的用户有所帮助 那是我在@core114 下面所做的。 @saroyanm 先生，像你一样【参考方案4】：您无法设置列边框的原因是 CSS specificity。
您的规则被更具体的规则覆盖，在您的情况下，<td> 最具体的规则是 .table-bordered>tbody>tr>td，它由 Bootstrap 设置。
对于如何处理这种情况，您有两种选择：
使用更具体的规则
编写将覆盖Bootstrap设置的规则，例如：
HTML
<table id="employees-table" class="table table-bordered">
...
</table>
CSS
#employees-table td,
#employees-table th
border: 3px solid gray;
使用 !important 异常
使用!important 被认为是一种不好的做法，但对于您的情况，它可能是最快/最简单的解决方案：
table td,
table th
border: 3px solid gray !important;
【讨论】：
非常感谢@saroyanm 提供的信息！！！你的回答也适用于我的桌子，但我只能选择一个接受的答案:(以上是关于Bootstrap CSS - 更改表格边框颜色的主要内容，如果未能解决你的问题，请参考以下文章
使用 CSS 在 Bootstrap 中删除导航栏切换器汉堡图标的边框颜色