I am trying to create some conditional formatting using JavaScript and HTML.
Basically I have a table with the following fields:
table
system
timestamp
total_amount
amount_used
amount_free
What I want based on the value of the column amount_free to change the colour of the field.
In this case if my column amount_free is 0 € then I want to have the red colour on my cell.
For that I am using the following code:
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td>0 €</td>
</tr>
</table>
But it doesn't return any colour. Only the table without formating.
Can anyone help me?
$(document).ready(function() {
$('#table_id .amount_free_value').each(function() {
const value = $(this).text().split('€')[0];
if (value == 0) {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free_value">0 €</td>
</tr>
</table>
What you are trying to check is somehow wrong, you have the currency inside the text string. You don't have an id for the table and neither a class or some attribute on the amount_free value from the table.
You can do it in this way.
you have some typo in your code (style part), your table also miss the ID property and there's no TD with the amount_free class on it.
Try with:
<head>
<script type='text/javascript'>
$(document).ready(function(){
$('#table_id td.amount_free').each(function(){
if ($(this).text() == '0 €') {
$(this).css('background-color','#f00');
}
});
});
</script>
</head>
<br><br>
<style>
table, td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table, th {
border: 1px solid black;
}
th, td {
padding: 3px;
}
th {
text-align: left;
}
th {
background-color: #f2f2f2;
}
td{
font-family: arial;
font-size: 10pt;
}
</style>
<table style=width:100% id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>
You need to provide id for table tag and class name for your specific td tag in your example. So your html code would be like below:
<!–– add id to table ––>
<table id="table_id" style=width:100%>
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<!–– add class to td ––>
<td class="amount_free">0 €</td>
</tr>
</table>
you are checking for a table with id table_id which doesn't exist. You are further checking a td-element with the class amount_free which also doesn't exist.
If you add ID and class then it will work.
$(document).ready(function() {
$('#table_id td.amount_free').each(function() {
if ($(this).text() == '0 €') {
$(this).css('background-color', '#f00');
}
});
});
table,
td {
word-wrap: keep-all;
border: 1px solid black;
border-collapse: collapse;
}
table,
th {
border: 1px solid black;
}
th,
td {
padding: 3px;
}
,
th {
text-align: left;
}
,
th {
background-color: #f2f2f2;
}
,
td {
font-family: arial;
font-size: 10pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%" id="table_id">
<tr>
<th>table</th>
<th>system</th>
<th>timestamp</th>
<th>total_amount</th>
<th>amount_used</th>
<th>amount_free</th>
</tr>
<tr>
<td>amount_values</td>
<td>users</td>
<td>2019-07-18 00:00:00</td>
<td>398 €</td>
<td>179 €</td>
<td class="amount_free">0 €</td>
</tr>
</table>
Related
Í'm trying to make this search/filter function filter by looking at data in col0 or col1.
What I'm trying to change the JS, to look at td = tr[i].getElementsByTagName("td")[0]; and td = tr[i].getElementsByTagName("td")[1];, but can't make it work.
Code working for searching on Name (not country):
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
</body>
</html>
You can grab the textContent of both the columns and then display the rows where the textContent contains the filterText.
I've also made the following changes to your code:
Wrapped table heading in <thead> and table body in <tbody>.
Used Element.children to loop over all the rows in the table.
Used Element.firstElementChild & Element.lastElementChild to grab the first and second column for every row.
Used String.prototype.includes to check if the search text is present in the columns.
Passed event to the function.
let tbody = document.getElementById("table-body");
function myFunction(e) {
const filterText = e.target.value.toUpperCase();
Array.from(tbody.children).forEach((row) => {
const name = row.firstElementChild.textContent.toUpperCase();
const country = row.lastElementChild.textContent.toUpperCase();
if (name.includes(filterText) || country.includes(filterText)) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
})
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction(event)" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<thead>
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tbody>
</table>
If there are more than two columns and you want to apply filter based on all columns, then you can use Array.prototype.some and check if any of the columns contain the search text.
let tbody = document.getElementById("table-body");
function myFunction(e) {
const filterText = e.target.value.toUpperCase();
Array.from(tbody.children).forEach((row) => {
const showRow = Array.from(row.children).some(c => c.textContent.toUpperCase().includes(filterText))
if (showRow) {
row.style.display = "table-row";
} else {
row.style.display = "none";
}
})
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction(event)" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<thead>
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
</thead>
<tbody id="table-body">
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tbody>
</table>
You need to search in both td elements for each row. In your code you only search in the first column because for each row you consider td = tr[i].getElementsByTagName("td")[0]; which is the 'Name' col. You need to consider also the second td element: td = tr[i].getElementsByTagName("td")[1];.
In the following snippet I just add another for loop inside myFunction(). It allows to check the 'Name' column (j = 0), like you do now, and then the 'Country' column (j = 1).
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
//for each row check both columns
for (j = 0; j < 2; j++){
td = tr[i].getElementsByTagName("td")[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
</body>
</html>
I'm trying to hide the whole div(where there's a table inside) when the result from filtering/searching thru the table is empty.
So far, I have this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.mytable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
.mytable th, .mytable td {
text-align: left;
padding: 12px;
}
.mytable tr {
border-bottom: 1px solid #ddd;
}
.mytable tr.header, .mytable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
</div>
<br><br>
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
function myFunction() {
var input, filter, table, tr, td, i,alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function(table){
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
});
}
</script>
<! ––hide div that doesnt have any data––>
<script>
$(function(){
var hide = true;
$('#myTable td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
</script>
</body>
</html>
As you can see, although the table is properly searched, the div and the table that has no value in its <td> is still showing.
How can I hide the whole div if the table's <td> is empty while searching it?
Your first problem is that you had several elements with the same ID, e.g. <div id="myTable1div">. I had to give them each a separate ID.
I created a helper function, hideDivs(), which counts the number of rows which are set to display: none, and if there is just one of them (i.e. the header), then hide that corresponding <div>.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.mytable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
.mytable th,
.mytable td {
text-align: left;
padding: 12px;
}
.mytable tr {
border-bottom: 1px solid #ddd;
}
.mytable tr.header,
.mytable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div id="myTable1div">
<table id="myTable" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
</div>
<br><br>
<div id="myTable2div">
<table id="myTable2" class="mytable" data-name="mytable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</div>
<script>
function hideDivs() {
['#myTable1div', '#myTable2div'].forEach(function (id) {
// From https://stackoverflow.com/a/5325109/378779
if ($(id + ' tr:not([style*="display: none"])').length == 1) {
$(id).hide();
} else {
$(id).show();
}
})
}
function myFunction() {
var input, filter, table, tr, td, i, alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function (table) {
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
});
hideDivs();
}
// hide div that doesn't have any data
hideDivs();
</script>
</body>
</html>
Try checking if the element is rendered in the DOM before hiding it.
You can do this by if ($('#myTable1div').is(':visible'))
I am not sure why is my table cell is not animating after click on a button. I want the whole row to animate into a different colour in specific time.
$("#buttonObserve").click(function() {
$("#trl1").animate({
backgroundColor: "#FFD801"
}, 1000);
});
#tableLast {
border-collapse: collapse;
width: 80%;
}
#tableLast td,
#tableLast th {
border: 1px solid #ddd;
padding: 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableLast" align="center">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr id="trl1">
<td id='tdl1'>1</td>
<td id='tdl2'>2</td>
<td id='tdl3'>3</td>
<td id='tdl4'>4</td>
</tr>
</table>
<button class="buttonObserve" id="buttonObserve"><img src="img/observe.png" height='100' width='150'></button>
2 Problems here:
First, you need to wrap javascript code inside $(document).ready.
Second, you need to import 'jquery.color.js' file.
Here's the working code.
$(document).ready(function(){
$("#buttonObserve").click(function () {
$("#trl1").animate({backgroundColor: "#FFD801"}, 1000);
});
});
<html>
<head>
<style>
#tableLast{
border-collapse: collapse;
width: 80%;
}
#tableLast td, #tableLast th{
border: 1px solid #ddd;
padding: 8px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<table id="tableLast" align="center">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr id="trl1">
<td id='tdl1'>1</td>
<td id='tdl2'>2</td>
<td id='tdl3'>3</td>
<td id='tdl4'>4</td>
</tr>
</table>
<button class="buttonObserve" id="buttonObserve"><img src="img/observe.png" height='100' width='150'></button>
</body>
</html>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
You need to import this js file to animate color.
I have a table with information and a simple search function to search any value in said table.
With CSS I styled the table and gave each row padding, but when I use the search function it seems to ignore the padding.
Maybe the following code snippet is useful:
Try to search for a value that's not there like Pink. Is there a way to maintain the padding throughout the search even if no value is found?
var $rows = $('.list #data');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
table td:nth-child(1) {
padding-right: 60px;
border-left: 1px solid #D3E2E8;
}
table td:nth-child(2) {
padding-right: 40px;
}
table td:nth-child(3) {
padding-right: 40px;
}
table td:nth-child(4) {
padding-right: 50px;
}
table td:nth-child(5) {
padding-right: 10px;
}
th, td {
border-bottom: 1px solid #D3E2E8;
}
tr:nth-child(even) {background-color: #E1F1F7}
tr:hover {background-color: #D0E5ED}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr><th>Name</th><th>Lastname</th><th>Age</th><th>Shirt color</th><th>Favorite food</th></tr>
<tr id="data">
<td>Brian</td>
<td>Johnson</td>
<td>17</td>
<td>Blue</td>
<td>Chicken tenders</td>
</tr>
<tr id="data">
<td>Jessica</td>
<td>Beloni</td>
<td>18</td>
<td>Green</td>
<td>Pasta Pesto salad</td>
</tr>
<tr id="data">
<td>Jason</td>
<td>Popi</td>
<td>19</td>
<td>Yellow</td>
<td>Mac and cheese</td>
</tr>
<tr id="data">
<td>Daniel</td>
<td>Soup</td>
<td>34</td>
<td>Grey</td>
<td>Chicken Supreme pizza</td>
</tr>
</table>
<input type="text" id="search" placeholder="Search on any value">
Remove padding everywhere and replace it with some width for your th and td.
var $rows = $('.list #data');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
table td:nth-child(1) {
width: 100px;
border-left: 1px solid #D3E2E8;
}
table th,
td {
width: 120px;
}
th,
td {
border-bottom: 1px solid #D3E2E8;
}
tr:nth-child(even) {
background-color: #E1F1F7
}
tr:hover {
background-color: #D0E5ED
}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
<th>Shirt color</th>
<th>Favorite food</th>
</tr>
<tr id="data">
<td>Brian</td>
<td>Johnson</td>
<td>17</td>
<td>Blue</td>
<td>Chicken tenders</td>
</tr>
<tr id="data">
<td>Jessica</td>
<td>Beloni</td>
<td>18</td>
<td>Green</td>
<td>Pasta Pesto salad</td>
</tr>
<tr id="data">
<td>Jason</td>
<td>Popi</td>
<td>19</td>
<td>Yellow</td>
<td>Mac and cheese</td>
</tr>
<tr id="data">
<td>Daniel</td>
<td>Soup</td>
<td>34</td>
<td>Grey</td>
<td>Chicken Supreme pizza</td>
</tr>
</table>
<input type="text" id="search" placeholder="Search on any value">
var $rows = $('.list #data');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
table{
width:100%;
}
table td{
width: 20%;
}
table td:nth-child(1) {
padding-right: 60px;
border-left: 1px solid #D3E2E8;
}
table td:nth-child(2) {
padding-right: 40px;
}
table td:nth-child(3) {
padding-right: 40px;
}
table td:nth-child(4) {
padding-right: 50px;
}
table td:nth-child(5) {
padding-right: 10px;
}
th, td {
border-bottom: 1px solid #D3E2E8;
}
tr:nth-child(even) {background-color: #E1F1F7}
tr:hover {background-color: #D0E5ED}
th {
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="list">
<tr><th>Name</th><th>Lastname</th><th>Age</th><th>Shirt color</th><th>Favorite food</th></tr>
<tr id="data">
<td>Brian</td>
<td>Johnson</td>
<td>17</td>
<td>Blue</td>
<td>Chicken tenders</td>
</tr>
<tr id="data">
<td>Jessica</td>
<td>Beloni</td>
<td>18</td>
<td>Green</td>
<td>Pasta Pesto salad</td>
</tr>
<tr id="data">
<td>Jason</td>
<td>Popi</td>
<td>19</td>
<td>Yellow</td>
<td>Mac and cheese</td>
</tr>
<tr id="data">
<td>Daniel</td>
<td>Soup</td>
<td>34</td>
<td>Grey</td>
<td>Chicken Supreme pizza</td>
</tr>
</table>
<input type="text" id="search" placeholder="Search on any value">
I want to create a html table as below.
I tried everything like frame="hsides" rules="groups" etc.
Nothing seems to work. Any thoughts on this please?
UPDATE: Here is the code. I need less space between the columns and no line on the tbody.
<table class="grouped-columns-table" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>Col A1</th>
<th class=""></th><!-- SPACER -->
<th>Col A2</th>
<th class=""></th><!-- SPACER -->
<th>Col B1</th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
</tbody>
</table>
.grouped-columns-table {
border-collapse: collapse;
}
.content-group {
border: 0;
}
.content-group-spacer {
width: 1px;
}
.grouped-columns-table td:not(.content-group-spacer) {
border: 0px solid #ccc;
border-collapse: collapse;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 0px solid #ccc;
border-bottom: 0px solid #ccc;
}
tbody {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
You are massively over complicating this. Get rid of the presentational HTML (including the data cells with no data in them).
You just need to set border-spacing so you have space between your cells where you want them, and then set borders around the edges of the cells you want borders on.
.grouped-columns-table {
border-collapse: seperate;
border-spacing: 10px 0;
}
.grouped-columns-table tbody tr > * {
border-left: solid black 1px;
border-right: solid black 1px;
}
.grouped-columns-table tbody tr:first-child td {
border-top: solid black 1px;
}
.grouped-columns-table tbody tr:last-child td {
border-bottom: solid black 1px;
}
<table class="grouped-columns-table">
<thead>
<tr>
<th>Col A1</th>
<th>Col A2</th>
<th>Col B1</th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
</tbody>
</table>
You can do it using first-child and last-child selectors, see fiddle: https://jsfiddle.net/snpsp6as/1/
.tb > tr:last-child > td{border-bottom: 1px solid #ccc;}
.tb > tr:last-child > .content-group-spacer{border-bottom: none !important;}
.tb > tr:first-child > td{border-top: 1px solid #ccc;}
.tb > tr:first-child > .content-group-spacer{border-top: none !important;}