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;}
Related
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>
I am trying to apply border styling to td but its not showing left border,
It works fine in some browser but does not work on other.
HTML,
<table class="table-bordered">
<thead>
<tr>
<th>One</th>
<th>Tow</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
Interactions -
$("tbody > tr > td").on("hover", function (event) {
var columnIndex = $(this).index() + 1;
$(this).closest("tbody").find('tr td:nth-child(' + columnIndex + ')').toggleClass('bordered', event.type === "mouseenter");
$("table").find('tr th:nth-child(' + columnIndex + ')').toggleClass('coloured', event.type === "mouseenter");
});
CSS -
td.bordered {
border-right: 1px solid red;
border-left: 1px solid red;
}
th.coloured {
background: #e8e8e8;
color: black;
}
table {
width:100%;
border-collapse:collapse;
table-layout:auto;
vertical-align:top;
margin-bottom:15px;
border:1px solid #999999;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #F2EDEB;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #522D25 url(images/bg_header.jpg) no-repeat;
}
tr {
background: #fff;
color: #261F1D;
}
tr:hover, tr.alt:hover {
color: #261F1D;
background-color: #E5C37E;
}
td {
border: 1px solid #000;
}
Testing environment Details
Google Chrome - Version 45.0.2454.85 m
Fiddle
Well I see that it is working fine for all the tds but you are not able to visualize it since right border of previous td is overlapping on left border of next td. You can identify it if you see the first td where both the borders get effected.
What I would suggest is try providing space between two tds and then I think you can visualize it properly. Not sure though whether padding or margin works on td.
UPDATE
As #Tushar said you can remove border-collapse property from table and below you can identify the changes.
DEMO
<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The above html data provides a table which has corresponding rows and columns. I want a format in which lines between rows should be hidden only column lines and table border lines should be visible . Hope my question is clear now . I want to create a table where lines between rows should be hidden
You can use the following css:
JSFIDDLE https://jsfiddle.net/seadonk/uf37xzqh/3/
HTML
<table id="thetable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
</table>
CSS
#thetable {
border: 2px solid gray;
background: lightgray;
border-spacing: 0px;
border-collapse: collapse;
}
#thetable td{
border-right: 2px solid gray;
padding: 20px;
}
You need to set the css properties border and border-collapse on your table tag and set the right border for your td.
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td {
border-right: 1px solid black;
text-align: center;
padding: 5px;
}
<table>
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>
<table frame="box" rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
try this
JsFieddle
HTML
<table style='border:solid' cellpadding="10" cellspacing="0">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
css
td{border-right:solid}
Please refer to this JSFiddle
I am using tablesorter to sort a table. I am also using fadeToggle on the first column of the table to show/hide hidden rows associated with each row.
I want the header of the table to have a border around each cell. The rest of the table should have border-collapse: collapse. It is great on page load and while sorting but as soon as you click to toggle a hidden row, the border shows up on all cells and remains until you resort the table.
I can't seem to find out where the style is getting inherited from after the toggle...
My HTML is:
<table cellspacing=4 cellpadding=2>
<tr>
<td valign='top'>
<div>
<table id="spidtable" class='tablesorter' cellspacing=1 cellpadding=5>
<thead>
<th align=left style="width:100px">SPID</th>
<th align=left style="width:200px">Name</th>
<th align=center style="width:60px">State</th>
<th align=center style="display:none;"> </th>
<th align=center style="width:100px">Duration</th>
<th align=center style="width:100px">Transitions</th>
<th align=center style="width:100px" title="UDM=Number of Degraded Minutes">UDM</th>
<th align=center style="width:100px" title="UIM=Number of Interrupted Minutes">UIM</th>
</thead>
<tbody>
<tr class="parent-row">
<td class="tdd" align=right>11111</td>
<td align=left>Chief Technologies</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1 /13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td> <td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>33333</td>
<td align=left>BBBBBBBBBBB</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td> <td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>77777</td>
<td align=left>ZZZZZZZZZZZ</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td><td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>44444</td>
<td align=left>GGGGGGGGGGG</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td><td>6:00AM</td></tr> </tbody> </table> </td> </tr>
</tbody></table></div></td><td valign='top'><div id='divSpid'></div></td></tr></table>
And my CSS is:
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 12pt;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: white;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
table.tablesorter tr.parent-row > td {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #253355), color-stop(1, #587993));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #253355 0%, #587993 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #253355 0%, #587993 100%);
}
table.tablesorter tr.parent-row-details > td {
background: grey;
}
table.tablesorter-child thead tr th, table.tablesorter tfoot tr th {
background-color: #e6E66E;
border: 1px solid #FFF;
font-size: 18pt;
padding: 4px;
}
table.tablesorter-child tbody tr td {
color: black;
}
For me the problem was with using css border-collapse setting. To fix the problem I had to set the table's cellspacing equal to 0.
I have a simple HTML table of options here:
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td>cream</td>
</tr>
</table>
The CSS with the relevant styles:
td { background-color: #FFF; border: 1px solid #3F3F3F; cursor: pointer; }
td.selected { color: #D93A2C; border: 1px solid #D93A2C; }
Looks like this:
When I click on one of the table cells, I want the border and text to be red. So I use jQuery to toggle the '.selected' class using the following code.
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
});
});
However the result is this:
The first table cell (blue) is the only one that looks as I want when selected. I need all the borders of the selected cell to be highlighted.
Any ideas on how to achieve this? I'm not opposed to ditching tables if someone can suggest a better way.
This works nicely for me:
<style type="text/css">
table { border: 1px solid #000; border-collapse: collapse; }
td { border-top: 1px solid #000; border-left: 1px solid #000; }
td.selected { border: 1px solid #F00; }
</style>
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td class="selected">yellow</td>
</tr>
</table>
Here is a very hack'ish way of getting the job done, might spark an idea on your end to produce something better... I've not fully tested it across browsers but worked on IE8,chrome,FF. Live example
HTML
<table>
<tbody>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
<tr>
<td>XYZ</td>
<td>asdf</td>
<td>2346</td>
</tr>
</tbody>
</table>
JS
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
$(this).prev('td').css('border-right','#ff0000');
$(this).parent().prev('tr').find('td:nth-child('+(this.cellIndex+1)+')').css('border-bottom','#ff0000')
});
});
CSS
table{
border-collapse: collapse;
}
td { border: 1px solid #ccc; padding:3px }
.selected{
border-color:#ff0000;
color:#ff0000;
}
.selected-bottom{
border-bottom-color:#ff0000;
}
.selected-right{
border-right-color:#ff0000;
}
It's easier to put a DIV in each cell then add the treatment to the DIV.
The CSS outline may be useful here, as it may be on top of other borders (which is the problem here).