HTML Tables and CSS control
-
The Situation I am displaying data from MYSQL database into a HTML table on a web page. I am using CSS to display alternative rows in different text size and background colours. I am using the 'hover' function to change background colours and text size The Problem The 'hover' function works perfectly for the 'odd; rows however for the 'even' rows it will change the text size but not the background colour My CSS code
table tbody tr:nth-child(odd) td {
background-color: lightblue;
}.table tbody tr:nth-child(even) td {
background-color: lightgreen;
}
table tbody tr:hover td {
background-color: white;
transition: all .5s;
font-weight:normal;
font-size: 2.5em;
color: black;
border-right: 1px solid grey;
}Solution: Can anyone spot the problem?
-
The Situation I am displaying data from MYSQL database into a HTML table on a web page. I am using CSS to display alternative rows in different text size and background colours. I am using the 'hover' function to change background colours and text size The Problem The 'hover' function works perfectly for the 'odd; rows however for the 'even' rows it will change the text size but not the background colour My CSS code
table tbody tr:nth-child(odd) td {
background-color: lightblue;
}.table tbody tr:nth-child(even) td {
background-color: lightgreen;
}
table tbody tr:hover td {
background-color: white;
transition: all .5s;
font-weight:normal;
font-size: 2.5em;
color: black;
border-right: 1px solid grey;
}Solution: Can anyone spot the problem?
Works fine for me in Firefox, Chrome, Edge, and IE11: Demo[^] The only slight issue is that the changing text size makes it very difficult to hover the next row accurately; as soon as the mouse leaves one row, its text size decreases, and the other rows shift up. It's easier to move in and out of the cells from the side.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
The Situation I am displaying data from MYSQL database into a HTML table on a web page. I am using CSS to display alternative rows in different text size and background colours. I am using the 'hover' function to change background colours and text size The Problem The 'hover' function works perfectly for the 'odd; rows however for the 'even' rows it will change the text size but not the background colour My CSS code
table tbody tr:nth-child(odd) td {
background-color: lightblue;
}.table tbody tr:nth-child(even) td {
background-color: lightgreen;
}
table tbody tr:hover td {
background-color: white;
transition: all .5s;
font-weight:normal;
font-size: 2.5em;
color: black;
border-right: 1px solid grey;
}Solution: Can anyone spot the problem?
OzWaz wrote:
.table tbody tr:nth-child(even) td {
Do you really want that leading "." ?
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
-
OzWaz wrote:
.table tbody tr:nth-child(even) td {
Do you really want that leading "." ?
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
-
Works fine for me in Firefox, Chrome, Edge, and IE11: Demo[^] The only slight issue is that the changing text size makes it very difficult to hover the next row accurately; as soon as the mouse leaves one row, its text size decreases, and the other rows shift up. It's easier to move in and out of the cells from the side.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Thanks for giving me some assistance. I have no idea why I had the problem but when I closed the browser cleared the cache and open it, it worked fine for me also. Clearing the Cache while open made no difference. Padding around the cells removes the issues you correctly identified on mouse over Thanks again
-
Yes. I think so? I have a number of tables on the one page and I only want the styling to apply to only one table. If i dont use the "class" option I found that it applies the styles to 'ALL' the tables Thanks you for taking the time to respond
OzWaz wrote:
If i dont use the "class" option I found that it applies the styles to 'ALL' the tables
In which case, you might be missing the "." in the other two rules. It was the inconsistency I picked up on.
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
-
OzWaz wrote:
If i dont use the "class" option I found that it applies the styles to 'ALL' the tables
In which case, you might be missing the "." in the other two rules. It was the inconsistency I picked up on.
Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012
Thanks -Sharp eyes But the missing "." in both cases was a poor C&P effort by me. and interestingly noting should have worked - if the code was so flawed - I am increasingly amazed how browser development is progress in holding on to code when it ought to relinquish it - But that the future. As you will see the problem is solved but the mystery remains! Nice that you engaged in assessing my problem Thanks
-
Works fine for me in Firefox, Chrome, Edge, and IE11: Demo[^] The only slight issue is that the changing text size makes it very difficult to hover the next row accurately; as soon as the mouse leaves one row, its text size decreases, and the other rows shift up. It's easier to move in and out of the cells from the side.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Hope this will be solved using right codes you get from online courses. They will provide you the exact code using for hover and text formats. Sometimes i have facing like this problems. But experts will make your work easier. https://channguyenvong.com/
-
Thanks for giving me some assistance. I have no idea why I had the problem but when I closed the browser cleared the cache and open it, it worked fine for me also. Clearing the Cache while open made no difference. Padding around the cells removes the issues you correctly identified on mouse over Thanks again
If you don't, already, when refreshing a page under development, use Ctl=F5 (at least in firefox) to force reload without the cache. There are also methods to add a header that forces uncached reloads for all - which at times can be handy.
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010
