I have a requirement where i have to apply conditional style for my table rows but the style never gets applied.
.test1 {
background-color: '#ffbf00';
}
.test2 {
background-color: '#92D050';
}
.test3 {
background-color: ' ';
}
<table id="testTable">
<tr styleClass="test1">
<td></td>
<td></td>
</tr>
</table>
But the styling will never be applied. something i am missing?
You have like 10 mistakes in this HTML code. Please learn HTML and CSS. Here is what you might want to achieve in a correct manner.
.test1 {
background-color: #ffbf00;
}
.test2 {
background-color: #92D050;
}
.test3 {
background-color: transparent;
}
<table id="testTable">
<tr class="test1">
<td>a</td>
<td>b</td>
</tr>
</table>
Do not put quotes on colors. It means class, not styleClass. ' ' is not a valid color value.
Use class for the definition in HTML and don't use quotes around the hex value.
.test1 {
background-color: #ffbf00;
}
.test2 {
background-color: #92D050;
}
.test3 {
background-color: ' ';
}
<table id="testTable">
<tr class="test1">
<td>Test</td>
<td>Test</td>
</tr>
</table>
target to td
.test1 td
{
background-color: #ffbf00;
}
.test2 td
{
background-color: #92D050;
}
.test3 td
{
background-color: none;
}
you need to add class name and styleClass="test1" not proper syntax
so update
styleClass="test1"
to
class="test1"
and one more thing your style code is not perfect
so also update
background-color: '#92D050';
to
background-color: #92D050;
cause this is also syntax error
other code is ok
.test1 {
background-color: #ffbf00;
}
.test2 {
background-color: #92D050;
}
.test3 {
background-color: rebeccapurple;
}
<table id="testTable">
<tr class="test1">
<td>test1</td>
<td>test1</td>
</tr>
<tr class="test2">
<td>test2</td>
<td>test3</td>
</tr>
<tr class="test3">
<td>test4</td>
<td>test5</td>
</tr>
</table>
Related
I have a simple HTML code where I draw a table and assign different classes to the Alternative rows :
<div id="content">
....
<table>
<tr class="a1"> ... </tr>
<tr class="a2"> ... </tr>
</table>
....
</div>
In my CSS I have the following definitions
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content tr.a1 {
background-color: #F1F1F1;
}
#content tr.a2 {
background-color: #F2FFFF;
}
When my HTML page loads background color remains white.
However if I update my CSS by removing "#content" :
tr.a1 {
background-color: #F1F1F1;
}
tr.a2 {
background-color: #F2FFFF;
}
everything works correctly. It seems like link to "content" property is not working. How can I fix it?
thank you in advance.
You need to wrap additionally in <td>...</td> tags.
Here is the correct structure for a regular table:
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
You can read more here.
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content tr.a1 {
color: #F1F1F1;
}
#content tr.a2 {
color: #F2FFFF;
}
<div id="content">
<table>
<tr class="a1">
<td>123<td>
</tr>
<tr class="a2">
<td>123<td>
</tr>
</table>
</div>
If you write #content tr.a1 it means tr is right after #content
which is obviously not, you have table in between.
I STAND CORRECTED
I have been honestly coding for 10 years wrong...
.class1 .class2 .name1 .name2 Selects all elements with name2 that
is a descendant of an element with name1
You can write that like this to work:
#content * tr.a1
or
#content table tr.a1
Please learn how to use CSS Selectors
Examples:
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content table tr.a1 {
background-color: red;
}
#content * tr.a2 {
background-color: blue;
}
<div id="content">
<table>
<tr class="a1">
<td>tr 1</td>
</tr>
<tr class="a2">
<td>tr 2</td>
</tr>
</table>
</div>
I have this simple html code. I am simply trying to format the colors but none of the CSS is actually formatting it.
I've tried changing the variables names, changing the table class to id and vice-versa.
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child td {
font-size: 30px;
background-color: red;
color: green;
}
#cell-style {
font-size: 8px;
text-align: left;
}
</style>
</head>
<html>
<body>
<table class="cool-table">
<tr>
<th id="cell-style">Fruit</th>
<th id="cell-style">Price</th>
</tr>
<tr>
<th id="cell-style">Apples</th>
<th id="cell-style">$10</th>
</tr>
<tr>
<th id="cell-style">Banana</th>
<th id="cell-style">$50</th>
</tr>
<tr>
<th id="cell-style">Mango</th>
<th id="cell-style">$20</th>
</tr>
</table>
</body>
</html>
It should show the entire table background as blue and the text should be purple. The first row's text should be large with a red background and green text. The rest of the cells should have a blue background with purple text and size 8px font.
Change your header cells to th and the normal cells to td. That way you do not need a id, class or tr:first-child to separate the header row from the rest. Note that if you use id, you should only use it on a single HTML tag. For multiple tags use class instead.
<html>
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table th { /* Changed to th, no need for tr:first-child */
font-size: 30px;
background-color: red;
color: green;
}
.cool-table td { /* Styling td-tags (table cells) */
font-size: 8px;
text-align: left;
}
</style>
</head>
<body>
<table class="cool-table">
<tr>
<th>Fruit</th> <!-- Keep as th -->
<th>Price</th>
</tr>
<tr>
<td>Apples</td> <!-- Changed to td -->
<td>$10</td>
</tr>
<tr>
<td>Banana</td>
<td>$50</td>
</tr>
<tr>
<td>Mango</td>
<td>$20</td>
</tr>
</table>
</body>
</html>
You can simply do it this way :
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child {
background-color: red;
color: green !important;
}
.cool-table tr:not(:first-child) {
font-size: 8px;
text-align: left;
}
<table class="cool-table">
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<th>Apples</th>
<th>$10</th>
</tr>
<tr>
<th>Banana</th>
<th>$50</th>
</tr>
<tr>
<th>Mango</th>
<th>$20</th>
</tr>
</table>
The first-child has a red background and green color, and everything that is NOT the first child gets a font-size of 8 and is aligned to the left.
There are several issues to look at.
style tag belongs in head tag which belongs in the html tag.
You can't use multiple ids in the same document - they're supposed to be unique. Try using a class like below.
the second css block doesn't do anything. Maybe you want to remove the td from the selector like below?
Several of your styles are not being applied because they override each other. Try making the selectors more specific to give them higher precedence.
You really want to understand the structure of html documents. You can verify them using the w3 validator
You can also learn more about CSS from Mozilla.
<!doctype html>
<html><head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child { /* removed 'td' */
font-size: 30px;
background-color: red;
color: green;
}
.cell-style { /* changed to class */
font-size: 8px;
text-align: left;
color: yellow;
}
</style>
</head><body>
<table class="cool-table">
<tr>
<th class="cell-style">Fruit</th>
<th class="cell-style">Price</th>
</tr>
<tr>
<th class="cell-style">Apples</th>
<th class="cell-style">$10</th>
</tr>
<tr>
<th class="cell-style">Banana</th>
<th class="cell-style">$50</th>
</tr>
<tr>
<th class="cell-style">Mango</th>
<th class="cell-style">$20</th>
</tr>
</table>
</body>
</html>
When the td-tag is hovered I want to change color the th-tag. I tried the below code but it doesn't working.
td,th{
border:solid;
}
td:hover~th{
color:red;
background:red;
}
<table>
<tr>
<th><h1>th1</h1></th>
<th><h1>th2</h1></th></tr>
<tr>
<td><h5>td1.1</h5></td>
<td><h5>td1.2</h5></td></tr>
<tr>
<td>td2.1</td>
<td>td2.2</td>
</tr>
</table>
~ is for elements that follows current element. CSS can't select previous elements or parent elements.
With JS you can do (using jQuery for simplicity)
$('td')
.mouseenter(function () {
$(this).closest('table').find('th').addClass('hovered')
})
.mouseleave(function () {
$('table .hovered').removeClass('hovered')
})
You didn't tag javascript so assuming you want a css-only solution, there is this trick but it will highlight the whole column.
(Unfortunately you can't select previous element with CSS for the moment, so you will need to use javascript to select the previous <th> only.)
table {
overflow: hidden;
}
tr:hover {
background-color: #ffa;
}
td, th {
position: relative;
}
td:hover::after,
th:hover::after {
content: "";
position: absolute;
background-color: #ffa;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}
<table>
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
<th>th4</th>
</tr>
<tr>
<td>td1.1</td>
<td>td1.2</td>
<td>td1.3</td>
<td>td1.4</td>
</tr>
<tr>
<td>td2.1</td>
<td>td2.2</td>
<td>td2.2</td>
<td>td2.2</td>
</tr>
</table>
I want to provide backgroud color to table cell based on the value this is what so far i have done:
<style type="text/css">
.Scheduled {
background-color: lime;
}
.Completed {
background-color: lawngreen;
}
.Completed with error {
background-color:red ;
}
.Pending {
background-color: #ffbf00 ;
}
</style>
<td class="#item.Status" >
#Html.DisplayFor(modelItem => item.Status)
</td>
i want Complete with error cell to be in Red how can i do it? what i am doing wrong?
expected output:
The spaces in .Completed with error make it an invalid css class name.
If the class name was changed to .Completed-with-error, then it would become valid.
Let's fix this:
<td class="#item.Status.Trim().Replace(' ', '-')" >
#Html.DisplayFor(modelItem => item.Status)
</td>
Now change your CSS as well:
<style type="text/css">
.Scheduled {
background-color: lime;
}
.Completed {
background-color: lawngreen;
}
.Completed-with-error {
background-color:red ;
}
.Pending {
background-color: #ffbf00 ;
}
</style>
Voila!
Updated:
Add .Trim(), to clean up any trailing spaces.
So the first thing that I see is .Completed with error which is not a valid css class. You can't have spaces in a css class.
You'll need to amend the code so the class is .Completed-with-error. Both on the HTML and in the styles.
you may find this useful, notice i dont have border outside table
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #888;
}
td{
color: #fff;
padding: 6px
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.pink{
background-color: pink;
}
<table border="1">
<tr>
<td class="red">fjdfk fdfdf</td>
<td class="green">fjdfk fdfdf</td>
</tr>
<tr>
<td class="blue">fjdfk fdfdf</td>
<td class="pink">fjdfk fdfdf</td>
</tr>
<tr>
<td class="red">fjdfk fdfdf</td>
<td class="green">fjdfk fdfdf</td>
</tr>
</table>
I have this table CSS:
table.show-my-request-table {
border: 1px solid black;
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
tr.show-my-request-table-header{
border: 1px solid black;
}
tr.show-my-request-table{
border: 1px solid black;
}
tr.show-my-request-table:hover{
background-color: #D3D3D3;
}
And table HTML:
<table class="show-my-request-table center">
<tr class="show-my-request-table-header">
<th>Date</th>
<th>Priority</th>
<th>Question</th>
</tr>
<tr >
<td class="show-my-request-table"> 11.8.2016 15:27:13
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
</td>
</tr>
<tr >
<td class="show-my-request-table">
11.8.2016 14:45:41
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
Jak se máš?
</td>
</tr>
</table>
I want set up a red background for the first td tag.
My problem is, that I don't know how to do it for only one table.
When I try:
td:first-child {
background-color: #ff0000;
}
it works for all tables.
I think that this code is good, but not working:
table.show-my-request-table > td:first-child {
background-color: #ff0000;
}
Why? How can I do this?
Try this:
table.show-my-request-table tr > td:first-child {
background-color: #ff0000;
}
You don't need to use > (immediate children selector) just put a space
Try this:
table.show-my-request-table td:first-child {
background-color: #ff0000;
}
table.show-my-request-table > td:first-child {
background-color: #ff0000;
}
This selector tries to target a td that is a direct child of the table element. As your own code shows:
<table class="show-my-request-table center">
<!-- snip -->
<tr >
<td class="show-my-request-table">
There is (and has to be) a tr element between them. But that's not all: the HTML parser will also silently insert a tbody element as a parent for the tr (unless you have explicitly included a <thead> or <tbody> tag). The <tbody> tag is optional in HTML, but the element is not, so the parser will simply add the element if the tag is missing.
The solution is to use the descendant selector:
table.show-my-request-table td:first-child {
background-color: #ff0000;
}
A keen observer will notice that the > combinator has been replaced by a (space) combinator.
You just need to target the element inside the table
Try this
table.show-my-request-table tr td:first-child {
background-color: #ff0000;
}
Here's a code pen http://codepen.io/anon/pen/LkrmqK
Cheers and happy coding.
table.show-my-request-table > td:nth-child(1) {
background: #25a3c2;
}
/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
background-color: #ff0000;
}
See it in action below
table.show-my-request-table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
tr.show-my-request-table-header {
border: 1px solid black;
}
tr.show-my-request-table {
border: 1px solid black;
}
tr.show-my-request-table:hover {
background-color: #D3D3D3;
}
/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
background-color: #ff0000;
}
<table class="show-my-request-table center">
<tr class="show-my-request-table-header">
<th>Date</th>
<th>Priority</th>
<th>Question</th>
</tr>
<tr>
<td class="show-my-request-table">
11.8.2016 15:27:13
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
</td>
</tr>
<tr>
<td class="show-my-request-table">
11.8.2016 14:45:41
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
Jak se máš?
</td>
</tr>