Menu
How can I also change the column borders in a HTML Table using Bootstrap CSS?
This is where I have gone so far:
Boostrap Pre-Defined Table
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
<!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>[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>
</div>
</div>
</body>
table.css
.jumbotron{
margin-top:250px
}
tr {
border: 3px solid gray;
}
Code is now in JsFiddle.
239
asked Jul 29 '26 13:07
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>[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>
</div>
</div>
</body>The reason why you are not being able to set column border is because of the CSS specificity.
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.
You have couple of options to how to deal with this situation:
Write rule that will override the one set by Bootstrap, for example:
HTML
<table id="employees-table" class="table table-bordered">
...
</table>
CSS
#employees-table td,
#employees-table th
{
border: 3px solid gray;
}
Using !important is considered to be a bad practise, but for your case it might be the most quickest/easiest solution:
table td,
table th
{
border: 3px solid gray !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
