I am using the below code to highlight a table rows, but it does not highlight the row.
It highlight only the current cell and it only turns the font color to white when i hover over the actual font.
Is there something I am missing?
HTML and CSS:
.schedule tr:not(:first-child) :hover{
font-weight:bold;
cursor:default;
background-color:#B80D9F;
color:white;
}
.schedule{
border-spacing:0px;
}
<table class="schedule" width="90%">
<tbody>
<tr>
<td style="width:50%">hello1</td>
<td style="width:50%">123</td>
</tr>
<tr>
<td style="width:50%">hello2</td>
<td style="width:50%">123</td>
</tr>
</tbody>
</table>
Update:
All the answers below are correct, but do not address the second issue with the font not changing to white when a <a> tag is used.
Why would the font-color not change?
Remove the space before :hover, because actually your try to access to the children of tr, not the tr itself
And color is setted with custom style on a, you have to add another css selector on a to change its color :
.schedule tr:not(:first-child):hover a{
color:white;
}
Change your css as following, you have mistake in your rule :-
.schedule tr:not(:first-child):hover{
font-weight:bold;
cursor:default;
background-color:#B80D9F;
color:white;
}
It may help you.
change your css to:
.schedule tr:not(:first-child):hover{
font-weight:bold;
cursor:default;
background-color:#B80D9F;
color:white;
}
.schedule{
border-spacing:0px;
}
the issue you had was the space before the :hover
the mistake is with the space
.schedule tr:not(:first-child):hover{
font-weight:bold;
cursor:default;
background-color:#B80D9F;
color:white;
}
.schedule{
border-spacing:0px;
}
All things updated.Please see working Link and enjoy!!
Spacing problem before :hover
HTML:
<table class="schedule" width="90%">
<tbody>
<tr>
<td style="width:50%">hello1</td>
<td style="width:50%">123</td>
</tr>
<tr>
<td style="width:50%">hello2</td>
<td style="width:50%">123</td>
</tr>
</tbody>
CSS:
.schedule tr:not(:first-child):hover{
font-weight:bold;
cursor:default;
background-color:#B80D9F;
color:white;
}
.schedule tr:not(:first-child):hover a{
color:white;
text-decoration:none;
}
.schedule tr:not(:first-child) a{
text-decoration:none;
color:black;
}
.schedule{
border-spacing:0px;
}
Related
I wish to make cell d with full yellow background.
How can I do that?
I am targeting the html in outlook display.
http://jsfiddle.net/f2pb227a/
Update 1: actually, I am using agility html pack to change the cell d at runtime and the table is already well formatted, for some reasons, I just wish change the cell d at last step, therefore, I want to use div to insert yellow bg without change it parent td class.
Final solution: https://jsfiddle.net/0khjqdh0/
<table class="XXX" >
<tr class="header">
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr class="d1">
<td>a</td>
<td>b</td>
</tr>
<tr class="d0">
<td>c
</td>
<td>
<div class="special_class"> d </div>
</td>
</tr>
</table>
.XXX table{
border:0px;
border-collapse:collapse;
padding:0px;
}
.XXX tr.header td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
font-weight: bold;
border:1px solid #C0C0C0;
color:#FFFFFF;
background-color:#4F81BD;
border-collapse:collapse;
padding:5px;
}
.XXX tr.d0 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
background-color:#E1EEF4;
border:1px solid #C0C0C0;
padding:5px;
white-space:nowrap;
}
.XXX tr.d1 td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10.0pt;
background-color:#FFFFFF;
border:1px solid #C0C0C0;
padding:5px;
white-space:nowrap;
}
.XXX div.special_class {
background-color:yellow;
}
Buddy, please check this - http://jsfiddle.net/afelixj/f2pb227a/4/
.XXX div.special_class {
background-color:yellow;
padding: 5px;
margin: -5px;
}
You can put the class on the cell:
<td class="special_class">
<div> d </div>
</td>
Then set the style on the cell and make it specific enought to override the existing style:
.XXX tr.d0 td.special_class {
background-color:yellow;
}
Demo: http://jsfiddle.net/f2pb227a/1/
try to apply background-color:yellow; to parent td or remove padding from td cell and give that padding to child div
You just need to give class not to child element of the td, but to exact td who's background-color you want to change:
<td class="special_class">
i want to hide <th> such a way that happens when we give display:none but if i use this property i can't display it on mouse hover.i placed an up arrow inside the th to point something on hovering the table;
** When my table is not in hovered state those th remain hidden but there remain blank space which i do not want.**
I have tried using like this margin-top:-555px; and on hover margin-top:0 but does not work.
i do not want the red mark area but hover state on given link is ok for me.
please help.
jsfiddle
<div class="existing_items">
<table cellspacing="0">
<th class="pointer"colspan="2"><span>^</span></th>
<tr><th class="" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
}
table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
I add position:inherit; in your table:hover th.pointer and it works;
You can try here:
http://jsfiddle.net/gkiwi/t7eecbzp/
Or
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table:hover th.pointer{
visibility:visible;
top:-10px;
left:20px;
position:inherit;
}
table th.pointer{
color:red;
visibility:hidden;
font-size:20px;
overflow:hidden;
position:absolute;
top:-20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
<div class="existing_items">
<table cellspacing="0">
<th class="pointer"colspan="2"><span>^</span></th>
<tr><th class="" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
I would suggest to not use an extra (useless) <th> for this purpose. You could instead use a pseudo-element on your title <th>, as they seems highly related. See my example below:
.existing_items{
background-color:green;
}
.existing_items table td{
text-align:center;
border-top:1px solid #eaeaea;
}
table th.with-arrow {
position: relative;
}
table:hover th.with-arrow:after{
content: "^";
position: absolute;
left: 10px;
top: 0;
color: red;
font-size:20px;
}
.leftname{
border-right:1px solid #eaeaea;
}
<div class="existing_items">
<table cellspacing="0">
<tr><th class="with-arrow" colspan="2">Title</th></tr>
<tr><td class="leftname">name</td><td>name</td></tr>
<tr><td class="leftname">type</td><td>type</td></tr>
</table>
</div>
Introduction
I have this portion of HTML:
<!DOCTYPE HTML>
[...]
<table class="inv">
<tr>
<td id="i_1"></td><td id="i_2"></td><td id="i_3"></td><td id="i_4"></td><td id="i_5"></td>
<td class="dt" rowspan="5">
<div style="height:460px;position:relative">
<div class="st msg"></div>
<img src="content/images/site/inv.png"><br>
<a id="nm">USER INVENTORY</a><br>
<span class="desc">Contain tradable items of the user, click on an item on the left.</span><br>
<div style="text-align:right;padding-top:15px" class="bts"></div>
</div>
<div id="bot" style="display:none"><span class="bt i_b pp"><</span> <span class="bt i_b np">></span> <span style="font-weight:bold" id="pgs"></span></div>
</td>
</tr>
<tr>
<td id="i_6"></td><td id="i_7"></td><td id="i_8"></td><td id="i_9"></td><td id="i_10"></td>
</tr>
<tr>
<td id="i_11"></td><td id="i_12"></td><td id="i_13"></td><td id="i_14"></td><td id="i_15"></td>
</tr>
<tr>
<td id="i_16"></td><td id="i_17"></td><td id="i_18"></td><td id="i_19"></td><td id="i_20"></td>
</tr>
<tr>
<td id="i_21"></td><td id="i_22"></td><td id="i_23"></td><td id="i_24"></td><td id="i_25"></td>
</tr>
</table>
[...]
Linked to this CSS:
body{
font:16px Arial, Tahoma;
background-color:#222222;
margin:auto;
width:100%;
}
table{
border-collapse:collapse;
color:#FFF;
width:100%;
}
table td{
border:1px solid #FFFFFF;
vertical-align:top;
text-align:left;
padding:0px;
}
.inv{
table-layout:fixed;
}
.inv td:not(.dt){
width:100px;
height:100px;
text-align:center;
vertical-align:middle;
}
.inv td:not(.dt) > img{
max-width:100px;
max-height:100px;
cursor:pointer;
}
.inv td:not(.dt) > img:hover{
position:absolute;
z-index:100;
width:110px;
height:auto;
margin-top:-55px;
margin-left:-55px;
box-shadow:0px 0px 2px 1px #000000;
}
.inv .dt{
width:35%;
padding:10px;
}
.inv .dt img{
width:100%;
height:auto;
}
.inv .dt #desc{
font-size:12px;
color:#B8B6B4;
max-height:60px;
overflow:hidden;
display:inline-block;
}
.bt.i_b{
color:#FFFFFF;
}
.bt.i_b:hover{
background-color:#1B1B1B;
}
.det #nm{
font-size:20px;
font-weight:bold;
}
All the TDs inside the table are filled with images with this code:
for(var i = 0; i < ((inv.length < 25) ? inv.length : 25); i++){
$("td#i_"+(i + 1)).html('<img src="content/images/albums/'+inv[i]["song_id"]+'.png" title="'+inv[i]["song_name"]+'" id="'+(i+1)+'">');
}
The problem
Everything works fine, I get what I need (the table filled), but I get some sort of padding/margin at the bottom of every td with an image in it. Even if I have set width and height of the cells to 100px, in Firebug I can see a height of 103.5px, why this happens? I've read that it can be DOCTYPE causing it, but I can't remove it, id there an alternative solution?
Thanks.
"but I get some sort of padding/margin at the bottom of every td with an image in it."
Because img is an inline element, and thats why you see white space at the bottom, use this
table img {
display: block;
}
Now this will target all the images inside table element, so if you want the specific ones, use a class instead and assign like
table img.your_class {
display: block;
}
Demo
In the first image, I've used style="display: block;" and written inline, and not for the other two, so, you will see white space for the next two images but not the first one
I've got a table with a <hr>, a title and a body text. I put the hover effect on the whole table but for the <hr>, it doesn't change the colour when mouseover the table only when mouseover the line. I need it to change colour as soon as the mouse touches the table like the rest. I tried various things but none seem to have worked.
How can I get the <hr> line to change the colour to white like the rest of the table when mouseover anywhere on the table? JSFiddle
HTML:
<body>
<table>
<thead>
<tr>
<td><hr /></td>
</tr>
</thead>
<thead>
<tr>
<td>This is the Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>some row content</td>
</tr>
</tbody>
</table>
</body>
CSS:
hr{
border:1px solid;
float:left;
align:left;
width:30%;
background-color:#991f33;
color:#991f33;
}
hr:hover{
background-color:#fff;
color:#fff;
}
table {
border:0;
background-color:#dcdcdc;
text-align:left;
text-decoration:none !important;
padding:20px;
}
thead tr a{
color: #911f33;
}
tbody tr{
font-size:10px;
line-height:19px;
color: #911f33;
}
table:hover, table:hover a{
color:#fff;
background-color:#911f33;
}
tr a{
color:#000;
}
<td><hr id="hrr"/></td>
css is
table:hover #hrr
{
border:1px solid blue;
}
I'm wondering if it's possible to have clickable links behind a css table.
When the images are 40px there is no way to select the link behind it.
Why i made it in a table is because every text block needs to be 248px (744/3)
CSS
#tabel{
position:absolute;
}
table, td, th
{
width:744px;
height:40px;
text-align:center;
}
th
{
background-color:transparent;
color:white;
}
HTML:
<div id="tabel">
<table cellspacing="0" cellpadding="0">
<tr>
<th>TXT 1</th>
<th>TXT 2</th>
<th>TXT 3</th>
</tr>
</table>
</div>
My goal is to have 3 clickable buttons (for an jquery image-slider with navigation) with text on top of it.
You may want to take the tableless approach like this: http://jsfiddle.net/t4tBt/
CSS
a.mybutton {
display:block;
width:248px;
height:30px;
float:left;
text-align:center;
vertical-align:middle;
color:#999;
text-decoration:none;
padding-top:10px;
}
a.first{
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
a.second {
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
a.last {
background:url('http://www.trade-website.co.uk/wp-content/uploads/2013/02/simple_blue_background-wallpaper-1920x1080.jpg');
}
HTML
<div id="tabel">
First Button
Second Button
Third Button
</div>