I would like to remove the bootstrap table-bordered horizontal line and keep the vertical line.
I have tried many solutions and done many of the research but I still cannot find the solution.
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Otto</td>
<td>#TwBootstrap</td>
</tr>
<tr>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Just add these css rules in your css file (remove the border from the td and add again to the right side):
.table-bordered td {border: none !important; border-right: solid 1px #ccc !important;}
.table-bordered td {
border: none !important;
border-right: solid 1px #ccc !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Otto</td>
<td>#TwBootstrap</td>
</tr>
<tr>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
One more snippet to remove the border from thead also...
.table-bordered td,
.table-bordered th {
border: none !important;
border-right: solid 1px #ccc !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Otto</td>
<td>#TwBootstrap</td>
</tr>
<tr>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This CSS should to the trick:
.table {border: 1px solid black!important;}
.table tr, .table td, .table th {border: 0!important;}
.table tr td:nth-child(2),
.table tr th:nth-child(2) {border-left: 1px solid black!important;}
If you want to support tables with more than 2 columns:
.table {border: 1px solid black!important;}
.table tr, .table td, .table th {border: 0!important;}
.table tr td,
.table tr th {border-left: 1px solid black!important;}
.table tr td:nth-child(1),
.table tr th:nth-child(1) {border-left: 0!important;}
See: https://codepen.io/anon/pen/PKbJNV
You can also do it like this in css if you really want to use table-bordered class..
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > td,
.table-bordered {
border-bottom:0;
border-top: 0;
}
Related
I need to remove the border vertical of the table except outside as shown below with bootstrap
I tried
<table class="table no-footer worker-data table-bordered"....
.table td, .table th {
border: none;
}
But result
Go with the below approach.
Clear the right border for first child of row.
Clear the left border for last child.
Clear right and left border for all other other child ec=xcept the first and last child of row.
Working Example
.table td:first-child, .table th:first-child {
border-right: none;
}
.table td:last-child, .table th:last-child {
border-left: none;
}
.table td:not(:first-child):not(:last-child),
.table th:not(:first-child):not(:last-child) {
border-right: none;
border-left: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<table class="table no-footer worker-data 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>
I want to create a table with only partly separated borders. The borders above and below the thead should be without spaces in between. But others in it should be separated by a small space.
Unfortunately, the border-spacing style only applies to the whole table: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
For example, in the following I want to have space only between the border-top of h2.1 and h2.2. Is that possible?
HTML:
<table>
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: separate;
}
th,
td {
vertical-align: top;
}
thead tr:first-child th {
border-top: 2px solid;
}
thead tr:not(:first-child) th {
border-top: 1px solid;
}
tbody tr:first-child td {
border-top: 1px solid;
}
tbody tr {
border-top: 1px solid;
}
Fiddle: https://jsfiddle.net/6ov4hadd/
Edit
Here is a more sensible example.
Fiddle: https://jsfiddle.net/Lnk929q4/
I want to look it like a "book table":
You can try using two different tables for head part and body part. Something like this
https://jsfiddle.net/6ov4hadd/1/
<table id = "table1">
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
I'm trying to apply a border to all tr's in a thead.
Css(stylus):
table
thead
tr
border: solid #000;
border-width: 0 10px;
According to chrome the styles get applied, but the border doesn't actually show up:
tr need its table to have border-collapse: collapse for border to work
table.first {
border-collapse: separate; /* property default */
}
table.second {
border-collapse: collapse;
}
table thead tr {
border-bottom: 2px solid gray;
}
/* for this demo only */
div {
margin: 25px 20px 10px;
text-decoration: underline;
}
<div>This table's tr (in thead) has no border</div>
<table class="first">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
<div>This table's tr (in thead) has border</div>
<table class="second">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
i'm not a css master but i usually write border properties in one line:
border: 10px solid #000;
I have following html for my table, but it is adding horizontal scroll on small screen...please help me..how to remove that scroll and make table completely responsive. Thanks.
<div class="table-responsive col-12 col-sm-12 col-lg-12">
<table class="table table-hover table-bordered text-capitalize" style="margin-top: 20px">
<tr style="background-color :black; color: white">
<th>Sr.No</th>
<th>Name</th>
<th>Expense Detail</th>
<th>Expense Date</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>aamir shoeb</td>
<td>abc</td>
<td>2016-04-09</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>aamir shoeb</td>
<td>hjk</td>
<td>2016-04-09</td>
<td>57</td>
</tr>
<tr>
<td>3</td>
<td>aamir shoeb</td>
<td>uuu</td>
<td>2016-04-10</td>
<td>56</td>
</tr>
<tr class="success">
<td colspan="3" style="visibility: hidden"></td>
<td>Total</td>
<td>1222</td>
</tr>
</table>
</div>
There are many ways to deal with table and responsive needs. Here is one way to do it, removing horizontal scroll on mobile as you wish :
See it here
CSS
#media (max-width:480px ){
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
tr td {
text-align: center;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
tr td:last-child {
border-bottom: 3px solid #333;
}
}
Why doesn't the border show around tbody in the following? I tried rules="groups" and the border appears, but only between the two tbody sections and it is collapsed.
table.sectioned tbody {
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
<table class="sectioned">
<tbody>
<tr><td colspan="2"><b>General Data</b></td></tr>
<tr><td>Tail Number</td><td>N0809021</td></tr>
<tr><td>Type of Ownership</td><td>personal</td></tr>
<tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
<tr><td>Year of Manufacture</td><td>1999</td></tr>
<tr><td>Use of Aircraft</td><td>private</td></tr>
<tr><td>Start Date</td><td></td></tr>
<tr><td>Policy Length</td><td>6 months</td></tr>
</tbody>
<tbody>
<tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
<tr><td>Manufacturer</td><td></td></tr>
<tr><td>Model</td><td></td></tr>
<tr><td>Engine Make</td><td></td></tr>
<tr><td>Number of Seats</td><td></td></tr>
</tbody>
</table>
Add:
table {border-collapse: collapse;}
FIDDLE
Add display:block to your tbody style. Try this
tbody{
display:block;
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
You can test it out on this fiddle
Use box-shadow instead of border. It works no matter which value of border-collapse was applied. In addition, you can also apply border-radius to it.
tbody {
box-shadow: 0 0 0 1px black;
border-radius: 5px;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</tbody>
</table>
.table_body, .tbody_td, .tbody_th
{ border: 1px solid black; }
.table_body { border-collapse: collapse; }
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td class="tbody_td">Jill</td>
<td class="tbody_td">Smith</td>
</tr>
<tr>
<td class="tbody_td">Eve</td>
<td class="tbody_td">Jackson</td>
</tr>
</tbody>
</table>