I have created the following table in html. I want to apply a style to table body elements in column which i have added a css class. But the style should not apply to header column. only to body column.
Here for a example i have add CSS class called "body-right". The result what i want is all the table body elements in column "Value" should "right align" except header column. How to achieve this in css.
Thanks a lot.
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
Use this:
tbody td:nth-of-type(3) {
text-align: right;
}
Example
table {
border-spacing: 0;
border-collapse: collapse;
font: 14px verdana;
}
td {
padding: 0.2em;
border: 1px solid gray;
}
tbody td:nth-of-type(3) {
text-align: right;
background: yellow;
width: 4em;
}
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
You can acheive this by specifying inline style for the header section seperately.
or make a little change in the css
like
thead .body-right { text-align:right; }
Related
I am displaying a table. Some cells of this table are filled with content. But there are some cells that are empty. What i want is that all empty cells have a different background color. How can i do that?
How can i check if a td is empty?
You can use :empty selector:
Demo:
//You can loop and remove the space charcater from cells
document.querySelectorAll('table tr > td').forEach(c => c.textContent = c.textContent.trim());
table, th, td {
border: 1px solid black;
}
table tr > td:empty {
background-color: yellow;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>March</td>
<td>$90</td>
</tr>
<tr>
<td>May</td>
<td> </td>
</tr>
</table>
You can use js/jquery to check if a cell is empty or not. Based on that you can add a class and give a background-color to the same.
Or if you want a css only approach, you can use :empty selector. But the problem with :empty is that it will not consider a td an empty one if there is just a few space in it. Check the below snippet.
$(document).ready(function () {
$("table td").each(function (index, eachCell) {
if ($(eachCell).html().trim().length === 0) {
$(eachCell).addClass("empty-cell");
}
});
});
.empty-cell {
background-color: red;
}
td {
border: 1px solid #ddd;
padding: 5px;
}
td:empty {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td> </td>
</tr>
</tbody>
</table>
For my site I have a table which I've done here: https://jsfiddle.net/stw4jyq8/
table {
width: 600px;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr.even {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th>Per 100g</th>
<th>Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td>362</td>
<td>181</td>
</tr>
<tr class="even">
<th>Fat</th>
<td>43.1g</td>
<td>21.6g</td>
<td>10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td>7.9g</td>
<td>3.9g</td>
</tr>
<tr class="even">
<th>Sodium</th>
<td>1,941.9mg</td>
<td>971mg</td>
<td>485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td>39.3g</td>
<td>19.7g</td>
</tr>
<tr class="even">
<th>Fiber</th>
<td>0g</td>
<td>0g</td>
<td>0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td>5.5g</td>
<td>2.7g</td>
</tr>
<tr class="even">
<th>Protein</th>
<td>10.5g</td>
<td>5.3g</td>
<td>2.6g</td>
</tr>
</table>
It looks fine when being viewed on a laptop but it doesn't look great when in mobile view. What I'm looking to do is that when I'm in mobile view it will change to something like:
and then underneath it will be a separate table for per 100g and then a 3rd for per buttery if that makes sense?
For this I am not sure how I could go about that though, would someone be able to point me in the right direction?
I'm thinking this is the best direction to go with? Unless someone has a better idea? Thanks again.
As a first lead, and despite agreeing with the suggestions for a select box, here's how you would have to do it with 3 tables for mobile:
Show your table as you did, but set a class to the columns to ease hiding them and styling them in general
Repeat your table 2 more times with only one data column each time (per 100g, per buttery)
Hide those 2 additional tables on large screens (by default) using CSS
Use a media query to trigger the changes:
Hide 3rd and 4th columns in your large table
Show both mobile tables
Adjust widths for better display
You can see the change in display in the below snippet by adjusting your window size
table.main {
width: 600px;
}
table.mobile {
display: none;
}
table.composition {
border: none;
border-spacing: 0;
border-collapse: collapse;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr:nth-child(2n) {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
#media screen and (max-width: 600px) {
table.main .per-50g {
display: none;
}
table.main .per-100g {
display: none;
}
table.mobile {
display: table;
}
table.composition {
width: 100%;
}
table.composition td {
width: 50%;
}
}
<table class="main composition">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th class="per-100g">Per 100g</th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td class="per-100g">362</td>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td>43.1g</td>
<td class="per-100g">21.6g</td>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td class="per-100g">7.9g</td>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td>1,941.9mg</td>
<td class="per-100g">971mg</td>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td class="per-100g">39.3g</td>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td>0g</td>
<td class="per-100g">0g</td>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td class="per-100g">5.5g</td>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td>10.5g</td>
<td class="per-100g">5.3g</td>
<td class="per-50g">2.6g</td>
</tr>
</table>
<table class="mobile per-100g composition">
<tr>
<th></th>
<th class="per-100g">Per 100g</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-100g">362</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-100g">21.6g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-100g">7.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-100g">971mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-100g">39.3g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-100g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-100g">5.5g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-100g">5.3g</td>
</tr>
</table>
<table class="mobile per-50g composition">
<tr>
<th></th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-50g">2.6g</td>
</tr>
</table>
You could use some javascript to duplicate the table, if that suits your use case.
Maybe somewhat like this question, but example in accepted seems not working.
I want to show here, Action button, on hovering the row. So when I hover to particular table row, so only that row's action button should be displayed and all others should be hidden.
So how can I achieve this? Is jQuery required or is it possible through Pure CSS?
<table class="table">
<thead>
<tr>
<th>Instance Id</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
</tbody>
</table>
It is pretty straight-forward and can be done with CSS.
You want a hover on the <tr> element (i.e. tr:hover) to change the display property of a descendant (i.e. .action). So the selector to use would be tr:hover .action.
Here's the working snippet:
.action {
display: none;
}
tr:hover .action {
display: inline;
}
<table class="table">
<thead>
<tr>
<th>Instance Id</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
<tr>
<td>123456</td>
<td>
Start
</td>
</tr>
</tbody>
</table>
You can read more about the descendant selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors
Found the solution Pure CSS:
.table tbody tr td a{
display: none;
}
.table tbody tr:hover > td a{
display: block;
}
make font-weight:bold if table tbody tr td value greater than 0 without loop using javascript or jquery
Selector is
$(table tbody tr td)
without $.each
HTML Sample
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>
If you need a Jquery, make
$('table td').attr('style','font-weight:bold;');
Without looping, and since values get set client side, you could combine the CSS attr(), a pseudo element like ::after and an attribute selector.
When your client side routine set a value, it does so to the attribute data-value="" instead of inside the element itself, and when done like that, you can use this CSS to style the cells
table td {
background: #eee;
}
table td::after {
content: attr(data-value);
padding: 10px;
}
table td[data-value="0"] {
color: green;
}
table td:not([data-value="0"]) {
color: white;
background: green;
}
<table id="example">
<tr>
<td data-value="0"></td>
<td data-value="1"></td>
<td data-value="2"></td>
</tr>
</table>
<table id="myTable">
<tr>
<td data-value="1"></td>
<td data-value="0"></td>
<td data-value="3"></td>
</tr>
</table>
You can use the :empty css selector like this :
#example td{
background-color: magenta;
color: #FFF;
}
#example td:not(:empty){
background: blue;
}
#myTable td:not(:empty){
font-weight: bold;
}
<table id="example">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
<table id="myTable">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
You can use .text() for retrieve the value and then passing a function that checks the value, returning it in bold in case of greater than 0.
I think it is the only way to do it without adding extra attributes to the HTML you provide us.
Check this snippet.
tds = $('table tr td').text(function(index, text){
return text > 0 ? $(this).css({"font-weight": "bold"}).text() : text;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>
Finally, the solution is to use JQuery selector :contains() to get cell text
$('table td:contains("0")').attr('style','font-weight:bold');
$('table td:contains("test")').attr('style','background-color:yellow');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border=1 width=200 value=9>
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>3</td>
<td>test</td>
</tr>
</table>
You can make the table cell bold by using this CSS:
table tbody tr td {
font-weight: bold;
}
That will apply an bold effect to text in the table cells. If there's no table cells to show then it'll skip the CSS rule.
Contrary to the duplicate notice, this question is not a duplicate. The purported duplicate does not address the case of nesting, something I've clearly explained in my question.
I have a table where rows can have one of two classes: parent or child. Some parents have many children, while others have no children. The HTML structure of the table, being flat, can not represent the hierarchical relationship between the rows; both parents and children are trs. Example:
Parent A
Child 1
Child 2
Parent B
Parent C
Child 1
I would like to stripe the rows so that odd and even parent rows have a color, and their respective children will have a lighter shade of the parent color.
Please see the included snippet for an example of what I'm trying to achieve.
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
.parentOdd {
background-color: #eb94fa;
}
.parentEven {
background-color: #c294fa;
}
.oddChild {
background-color: #f2c4fa;
}
.evenChild {
background-color: #d8bbfd;
}
<table>
<tbody>
<tr class="parentOdd">
<td>Parent A</td>
</tr>
<tr class="oddChild">
<td>A1</td>
</tr>
<tr class="oddChild">
<td>A2</td>
</tr>
<tr class="parentEven">
<td>Parent B</td>
</tr>
<tr class="parentOdd">
<td>Parent C</td>
</tr>
<tr class="oddChild">
<td>C1</td>
</tr>
<tr class="oddChild">
<td>C2</td>
</tr>
<tr class="parentEven">
<td>Parent D</td>
</tr>
<tr class="evenChild">
<td>D1</td>
</tr>
<tr class="evenChild">
<td>D2</td>
</tr>
</tbody>
</table>
I tried using CSS pseudo-selectors, but no luck.
.parent:nth-child(odd) {
background-color: green;
}
.parent:nth-child(even) {
background-color: blue;
}
The nth-child selector ignores the class. I tried using nth-of-type but that also ignored the class. And besides, both pseudo-selectors can't handle the case of the children.
Is what I'm trying to do possible in CSS? Or do I have to resort to JavaScript?
Is there any reason not to use multiple <tbody>s?
Grouping rows can make it easy.
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
tbody:nth-child(odd) > tr { /* odd child */
background-color: #f2c4fa;
}
tbody:nth-child(odd) > tr:nth-child(1) { /* odd parent */
background-color: #eb94fa;
}
tbody:nth-child(even) > tr { /* even child */
background-color: #d8bbfd;
}
tbody:nth-child(even) > tr:nth-child(1) { /* even parent */
background-color: #c294fa;
}
<table>
<tbody>
<tr>
<td>Parent A</td>
</tr>
<tr>
<td>A1</td>
</tr>
<tr>
<td>A2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent B</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent C</td>
</tr>
<tr>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Parent D</td>
</tr>
<tr>
<td>D1</td>
</tr>
<tr>
<td>D2</td>
</tr>
</tbody>
</table>
why not do some javascript?
var RowNumber = 0,
for(i = Rownumber + 1; i<=x*;i++) {
If (RowNumber % === 0) {
this.setAttribute('class', 'even');
} else {
this.setAttribute('class', 'odd');
}
});
create the even class and odd class and give each tr an id
*This is a note: Set x to equal the amount of rows in your table.
OR do a switch statement, I prefer a good ol' if statement but Switch could work just as well :)
Check this solution: http://fiddle.jshell.net/manzapanza/6vjLm0td/
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #eee;
padding: 10px;
}
.parentOdd {
background-color: #eb94fa;
}
.parentOdd.child:nth-child(odd) {
background-color: #F2C9F9;
}
.parentOdd.child:nth-child(even) {
background-color: #F9E1DC;
}
.parentEven {
background-color: #c294fa;
}
.parentEven.child:nth-child(odd) {
background-color: #E1CCFC;
}
.parentEven.child:nth-child(even) {
background-color: #EEE5FA;
}
<table>
<tbody>
<tr class="parentOdd">
<td>Parent A</td>
</tr>
<tr class="parentOdd child">
<td>A1</td>
</tr>
<tr class="parentOdd child">
<td>A2</td>
</tr>
<tr class="parentEven">
<td>Parent B</td>
</tr>
<tr class="parentOdd">
<td>Parent C</td>
</tr>
<tr class="parentOdd child">
<td>C1</td>
</tr>
<tr class="parentOdd child">
<td>C2</td>
</tr>
<tr class="parentEven">
<td>Parent D</td>
</tr>
<tr class="parentEven child">
<td>D1</td>
</tr>
<tr class="parentEven child">
<td>D2</td>
</tr>
</tbody>
</table>