I am setting a :hover attribute on a table to change the row color on hover. It is working fine on CHROME and EDGE but not on IE 11.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
and
<meta http-equiv='X-UA-Compatible' content='IE=9; IE=10; IE=11;IE=8; IE=7; IE=EDGE'/>
CSS part:
tr.fullrow:hover{
background:yellow;
font-size:16px;
}
HTML part:
<table border = "1" class ="tablewip">
<caption> Assy WIP by Product </caption>
<thead>
<tr class ="headerrow">
<td class="headercells" font-size:100px; nowrap >'.$colHeader.'</td>
</tr>
</thead>
<tbody>
<tr class = "fullrow">
<td class = "wipcells" nowrap >Text </td>
</tr>
</tbody>
</table>
Stack snippet
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=9; IE=10; IE=11;IE=8; IE=7; IE=EDGE' />
<style>
tr.fullrow:hover {
background: yellow;
font-size: 16px;
}
</style>
</head>
<body>
<table border="1" class="tablewip">
<caption> Assy WIP by Product </caption>
<thead>
<tr class="headerrow">
<td class="headercells" font-size:100px; nowrap>'.$colHeader.'</td>
</tr>
</thead>
<tbody>
<tr class="fullrow">
<td class="wipcells" nowrap>Text </td>
</tr>
</tbody>
</table>
</body>
</html>
For the CSS part try the following:
tr.fullrow:hover{
background-color:yellow;
font-size:16px;
}
See this example: https://codepen.io/pjamourik/pen/EGBgEy
I would style td of hovered element instead of tr. For example:
tr.fullrow:hover td{
background:yellow;
font-size:16px;
}
Related
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
I have two independent tables. How to manage when I mouse over one of the cell on Table 1 then cells which have the same values on Table 2 turn highlighted? I prefer to use html/css coding, not JQuery?
I worked on code below but no success.
<HTML>
<STYLE type=text/css>
tr:hover td.highlight776{ background-color:red; }
tr:hover td.highlight970{ background-color:blue; }
tr:hover td.highlight1024{ background-color:magenta; }
tr:hover td.highlight1197{ background-color:yellow; }
tr:hover td.highlight1200{ background-color:orange; }
tr:hover td.highlight1015{ background-color:orange; }
</STYLE>
<HEAD>
<TITLE></TITLE>
<META name="description" content="">
<META name="keywords" content="">
<META name="generator" content="CuteHTML">
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
<br><br>
Table 1
<Table border=1>
<tr>
<td class="highlight776">Proje 776</td>
</tr>
<tr>
<td class="highlight1015">Proje 1015</td>
</tr>
<tr>
<td class="highlight970">Proje 970</td>
</tr>
<tr>
<td class="highlight1024">Proje 1024</td>
</tr>
<tr>
<td class="highlight1197">Proje 1197</td>
<tr>
<td class="highlight1200">Proje 1200</td>
</tr>
</Table>
<br><br><br>
Table 2
<Table class="tahsis" border=1>
<tr>
<td class="highlight776">776</td>
<td class="highlight1015">1015</td>
<td class="highlight776">776</td>
<td class="highlight970">970</td>
<td class="highlight1024">1024</td>
<td class="highlight970">970</td>
</tr>
<tr>
<td>970</td>
<td>776</td>
<td>776</td>
<td>776</td>
<td>1015</td>
<td>1015</td>
<tr>
<td>1015</td>
<td>776</td>
<td>970</td>
<td>970</td>
<td>1024</td>
<td>970</td>
</tr>
</Table>
</BODY>
</HTML>
Here is html code for table i am having disorentation problem in resulting table. Kindly help.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color:#A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr>
<tr>
<td rowspan="4">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td> <td align="center"> 1</td> <td align="center">50</td> <td align="center">1.45</td
></tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units <td> 1</td> <td>50</td> <td> 1.45</td>
</tr><tr>
<td>51</td> <td>100</td> <td>2.6</td>
</tr>
</body>
</html>
Resulting table is disoriented what can be done to make table's row of equal size.
Not sure I completely understand the question, but there were some problems with the closing tags in your code and one of the td rowspans, maybe that was why it wasn't rendering correctly. Try the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color:#A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th>State</th>
<th>Condition</th>
<th>Slab Low</th>
<th>Slab High</th>
<th>Rate(in Rs)</th>
</tr>
<tr>
<td rowspan="3">Andhra Pradesh (As per tariff order dated 23rd March 2015.)</td>
<td colspan="3">Consumption less than 50 Units</td><td>1</td><td>50</td><td>1.45</td>
</tr>
<tr>
<td colspan="3" rowspan="2">Consumption between 1 & 100 Units</td>
<td>1</td>
<td>50</td>
<td>1.45</td>
</tr>
<tr>
<td>51</td>
<td>100</td>
<td>2.6</td>
</tr>
</body>
</html>
If fixing the closing and opening tags doesn't work, then (following your screenshot) the HTML markup should be something like this (just change the values);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 80%;
background-color: #A6F7EE;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1a</th>
<th>1b</th>
<th>1c</th>
<th>1d</th>
<th>1e</th>
<th>1f</th>
</tr>
<tr>
<td rowspan="4">2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
<td>2e</td>
<td>2f</td>
</tr>
<tr>
<td rowspan="2">3a</td>
<td rowspan="2">3b</td>
<td>3c</td>
<td>3d</td>
<td>3e</td>
</tr>
<tr>
<td>4c</td>
<td>4d</td>
<td>4e</td>
</tr>
<tr>
<td>5b</td>
<td>5c</td>
<td>5d</td>
<td>5e</td>
<td>5f</td>
</tr>
</table>
</body>
</html>
Code :
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr>
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
Is there any technique I can use to highlight the items that have changed ( in this case , 2nd row's 1st column) using CSS ? or do I have to resort to other things like JavaScript ?
Use classes like:
<html>
<head>
<style type="text/css">
.highlight{
background: fuchsia;
}
</style>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr class="highlight">
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
And if something changes you can add the class to the specific element:
$(element).addClass('highlight');
or with plain JavaScript:
element.class = 'highlight';
If you're asking how to highlight the second column of the second row specifically this will work:
table > tr:nth-child(2) > td:nth-child(2) {
background-color:#FFEEEE;
}
If you're asking how to highlight changed rows ANYWHERE, use a class.
Add this to the of your document or the stylesheet.
<style> .highlight { background-color:#FFEEEE; }
Add this to your TD's
class="highlight"
I have the following html code:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td rowspan="2">Save a lot</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>
Using CSS styling or another method, can I make the text "Save a lot" top, left justified?
td[rowspan] {
vertical-align: top;
text-align: left;
}
See: CSS attribute selectors.
<td rowspan="2" style="text-align:left;vertical-align:top;padding:0">Save a lot</td>
That should do it.
try this
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:50%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="height:100px">
<td valign="top">January</td>
<td valign="bottom">$100</td>
</tr>
</table>
<p><b>Note:</b> The valign attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
use valign="top" for td style