I am using bootstrap-table and I would like to color certain columns red or green based on the value that they are having.
I am having the following table:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<h2>Products</h2>
<div class="table-responsive">
<table id="table" data-toggle="table" data-height="460" data-page-size="10" data-pagination="true" class="table table-striped table-hover">
<thead>
<tr>
<th data-field="trx_date" scope="col">Transaction Date</th>
<th data-field="order_type" scope="col">Buy/Sell</th>
<th data-field="total_trx" scope="col">Total Transaction</th>
<th data-field="SecInfo" scope="col">Details</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td>$95,001,513.81</td>
<td>Details</td>
</tr>
</tbody>
</table>
</div>
Is there a way to style each row like the following:
I tried to set a data-element on my tr-tag however, as I have many tables that need to get styled ist there an easier way with css?
I appreciate your replies!
Is this What you need?
The reason for using class instead of manually telling to check 'nth' cell is because, May be in future the order column in table or the number of column in the table may vary, so its recommenced to use a selector to implement this
$('.trans').each(function() {
if (parseFloat($(this).text().replace(/\$|,/g, '')) <= 100000000.00) {
$(this).parent().css({
'background-color': '#89e289'
})
} else {
$(this).parent().css({
'background-color': '#f08080'
})
}
});
//If you want to check Sell/Product cell do:
$('.sales').each(function(){
if($(this).text() == 'Sell'){
$(this).parent().css({'background-color' : '#89e289'})
}
else{
$(this).parent().css({'background-color' : '#f08080'})
}
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<h2>Products</h2>
<div class="table-responsive">
<table id="table" data-toggle="table" data-height="460" data-page-size="10" data-pagination="true" class="table table-striped table-hover">
<thead>
<tr>
<th data-field="trx_date" scope="col">Transaction Date</th>
<th data-field="order_type" scope="col">Buy/Sell</th>
<th data-field="total_trx" scope="col">Total Transaction</th>
<th data-field="SecInfo" scope="col">Details</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Sell</td>
<td class="trans">$195,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Purchase</td>
<td class="trans">$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Purchase</td>
<td class="trans">$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Purchase</td>
<td class="trans">$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Sell</td>
<td class="trans">$195,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Sell</td>
<td class="trans">$195,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Purchase</td>
<td class="trans">$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Purchase</td>
<td class="trans">$95,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Sell</td>
<td class="trans">$195,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Sell</td>
<td class="trans">$195,001,513.81</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td class="sales">Sell</td>
<td class="trans">$195,001,513.81</td>
<td>Details</td>
</tr>
</tbody>
</table>
</div>
With your current HTML, you could use something like this to get the value of the appropriate cell, reformat the string into a float, and change the background color based on this value.
$('#table tr').each(function () {
let value = this.children[2].innerHTML;
// omit dollar signs and commas with replace and return a float
value = parseFloat(value.replace(/\$|,/g, ''));
// compare values and adjust styling
value > 90000000.50 ? this.style.backgroundColor = 'lightgreen' : '';
value < 10000000.75 ? this.style.backgroundColor = 'salmon' : '';
});
Unfortunately you cannot set base color or styles of any elements in your HTML, depending on the content they have with CSS. This is something you must look over with javascript.
Why this? Because CSS is a frontend styling "modifier", that edits property of HTML without looking at its content and what there is written. It simply applies styles. With JavaScript however, you can edit the content by taking it, analyzing it, and changing its style.
I took your code and edited a little the content of it to modify and show you how you can deal with this in javascript. You can do that in more efficient ways but I went for simplicity and the DOM to make you understand at best
for (let i = 0; i < 11; i++) {
let price = document.getElementsByClassName('price')[i].innerText;
console.log(price)
if (price <= 100){
document.getElementsByClassName('price')[i].style.backgroundColor = 'red'
} else if (price > 100) {
document.getElementsByClassName('price')[i].style.backgroundColor = 'blue'
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<h2>Products</h2>
<div class="table-responsive">
<table id="table" data-toggle="table" data-height="460" data-page-size="10" data-pagination="true" class="table table-striped table-hover">
<thead>
<tr>
<th data-field="trx_date" scope="col">Transaction Date</th>
<th data-field="order_type" scope="col">Buy/Sell</th>
<th data-field="total_trx" scope="col">Total Transaction</th>
<th data-field="SecInfo" scope="col">Details</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td class="price">80</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td class="price">90</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td class="price">700</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td class="price">900</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td class="price">500</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td class="price">200</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td class="price">300</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Purchase</td>
<td class="price">100</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td class="price">100</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td class="price">100</td>
<td>Details</td>
</tr>
<tr>
<th scope="row">8/18/2016</th>
<td>Sell</td>
<td class="price">100</td>
<td>Details</td>
</tr>
</tbody>
</table>
</div>
I would like the first two columns to only occupy the width of their contents, and for the final 3rd column to be justified to the right with a gap (if any) between the 2nd and 3rd columns as immediately below. In the diagram I have marked this as a large empty column.
+-------+------+-------------------+------+
| Col1 | Col2 | | Col3 |
+-------+------+-------------------+------+
| Val 1 | Val2 | | Val3 |
+-------+------+-------------------+------+
Some restraints:
I can use only bootstrap.
I cant use any custom styles.
I've tried it as follows, but it's not working.
<table class="table table-bordered">
<thead>
<tr class="row">
<td class="col-md-1">col1</td>
<td class="col-md-1">col2</td>
<td class="col-md-9"></td>
<td class="col-md-1">col3</td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-1">val1</td>
<td class="col-md-1">val2</td>
<td class="col-md-9"></td>
<td class="col-md-1">val3</td>
</tr>
</tbody>
</table>
Bootstrap 4
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
Bootstrap 3
<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>
Check which version you are using for bootstrap. If any of the above code is not working please check you imported the bootstrap properly or not.
Im added to Angular website for table ,that table col is not align ,any one know how to do that correctly ?
Thanks
<div class="table-responsive ">
<table class="table" style="width: 100%">
<thead>
<tr>
<th scope="col" width="50">ID</th>
<th scope="col" width="300">Book Name</th>
<th scope="col" width="250">Total Book</th>
<th scope="col" width="250">Date</th>
<th scope="col" width="250">Remarks</th>
<th scope="col" width="250">Booking Date</th>
<th scope="col" width="250">Booking Status</th>
</tr>
</thead>
</table>
</div>
<mat-accordion>
<mat-expansion-panel (opened)="panelOpenState = true; openContent(order)"
(closed)="panelOpenState = false">
<mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight"
[expandedHeight]="customExpandedHeight">
<table class="table ">
<tbody>
<tr>
<td class="tb-td-txt" width="50">12</td>
<td class="tb-td-txt" width="300">ABC</td>
<td class="tb-td-txt" width="250">100}</td>
<td class="tb-td-txt" width="250">10-11-2018</td>
<td class="tb-td-txt" width="250">Jhone Doe</td>
<td class="tb-td-txt" width="250">10-05-2019</td>
<td class="tb-td-txt" width="250">Completed</td>
</tr>
</tbody>
</table>
</mat-expansion-panel-header>
</mat-accordion>
There are a few things...
the lower table is a child of .mat-expansion-panel, so for the table outside it, we mimic the padding:0 24px
but there is also a down arrow for mat-expansion-indicator so we gotta increase the padding on the right side by 8px
next, we text-align center for the bottom table (which is inside the mat-expansion) so that the effect is similar
I have also put a red borders on the <td> so that you can see this
relevant CSS:
th, td{border:1px solid red;}
.table-responsive>.table{padding:0 32px 0 24px;}
mat-expansion-panel-header .table td{text-align: center}
complete working stackblitz here
Alignment of borders of table using bootstrap table-bordered class is not proper when scrollbar appears, Itried many workarounds, but problem is still there, can someone please help?
Here is my hbs:
<title>UI</title>
<div ng-controller="appCtrl">
<div class="row">
<div class="col-md-12">
<table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
<thead style="display:table;width:100%;table-layout:fixed;">
<tr>
<th style="text-align:center;" width="15%"></th>
<th style="text-align:center;" width="15%">Pending</th>
<th style="text-align:center;" width="15%">Done</th>
</tr>
</thead>
<tbody style="display:block;height:164px;overflow:auto;">
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
</tbody>
</table>
Alignment is not proper: 1
Try this out, the major cause of the issue of border not aligning is table-layout:fixed; on the thead. You can run it an see
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-md-12">
<table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
<thead style="display:table;width:100%;">
<tr>
<th style="text-align:center;" width="15%"></th>
<th style="text-align:center;" width="15%">Pending</th>
<th style="text-align:center;" width="15%">Done</th>
</tr>
</thead>
<tbody style="display:table;height:164px;overflow:auto; table-layout:fixed;">
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm aware of table-responsive class but it's not working here and it's breaking the UI.
My code looks like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table id="home-table">
<tr>
<td class='home-cell'>
<table class="table table-bordered">
<caption>Overview</caption>
<thead>
<tr>
<th>Device ID</th>
<th>Last Reading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Demo 1</td>
<td>Reading: R1</td>
</tr>
</tbody>
</table>
</td>
<td class='home-cell'>
<table class="table table-bordered">
<caption>Alarms and Schedules</caption>
<thead>
<tr>
<th>Device ID</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dev 1</td>
<td>Scheduled 10:00 AM OFF</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
How can I achieve separate responsive horizontal scrollbars in both the tables inside the main table?
you can do it like this
<style>
.home-cell.table-responsive {
width: 150px;
overflow: auto !important;
display: inline-block;
}
table .table-bordered {
width: 190px;
min-width: 270px;
}
</style>
<table id="home-table">
<tbody>
<tr>
<td class="home-cell table-responsive">
<table class="table table-bordered">
<caption>Overview</caption>
<thead>
<tr>
<th>Device ID</th>
<th>Last Reading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Demo 1</td>
<td>Reading: R1</td>
</tr>
</tbody>
</table>
</td>
<td class="home-cell table-responsive">
<table class="table table-bordered">
<caption>Alarms and Schedules</caption>
<thead>
<tr>
<th>Device ID</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dev 1</td>
<td>Scheduled 10:00 AM OFF</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Try this, This will work
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-bordered">
<th colspan="3">Outer Table</th>
<tr>
<td>This is row one, column 1</td>
<td>This is row one, column 2</td>
<td>
<table class="table table-bordered">
<th colspan="3">Inner Table</th>
<tr>
<td>This is row one, column 1</td>
<td>This is row one, column 2</td>
<td>This is row one, column 3</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
https://jsfiddle.net/DTcHh/38830/