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;
}
Related
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;
}
Here's the fiddle:
https://jsfiddle.net/80mek2sL/1/
I want to select all but the first tr and apply:
border-top: 1px grey solid;
Then I want to select all first td's but not the first td of the first tr (= ignore first tr) and apply
border-right: 1px grey dotted;
(I totally dont care about compatibility with prehistorical Web browsers, I just want it to work on nowadays Web browsers)
What I dont get (that's why I'm lost actually) is that immediate selector table > tr doesn't select tr (otherwise I would have solved my problem)
Your selector is working. The problem is that tr's don't have a border. You need to apply it the td within...
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
Updated Fiddle
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px; padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
<h1>Vim</h1>
<table id="cheatsheet">
<thead><tr>
<td colspan="2"><h3>aa</h3></td>
</tr></thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code></td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code></td>
<td style="width:auto">split vertical</td>
</tr>
</table>
On another note, the reason table > tr doesn't work is because tr's are not an immediate descendant of table in the rendered HTML. If you use your browsers element inspector you will see that thead and tbody elements are automatically inserted for you
EDIT
After the comment below all you need to do is this...
#cheatsheet tbody td {
border-top:1px grey solid;
background-color: #EF0;
}
ie. target the td within tbody only,
Updated Fiddle
check fiddle :https://jsfiddle.net/80mek2sL/6/
nth-child(n+2) selector helps to select any number of child. in following example I am selecting row from ahead of second child.
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
You can also play aorund (n + *) and check the result to better understand the nth-child selector
note: you can not put border property to <tr> so you will need to
assign it to <td>
HTML
<table id="cheatsheet">
<thead>
<tr>
<td colspan="2">
<h3>aa</h3>
</td>
</tr>
</thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code>
</td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
</table>
CSS
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px;
padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
Can the background color on a table's caption be changed with CSS?
The captions on my tables are currently using the background behind them and I would like to make the caption's background a different color.
If so what is the CSS property ?
Here is my current CSS
.Table {
margin:0px;padding:0px;
width:100%;
border:1px solid #4c4040;
-moz-border-radius-bottomleft:8px;
-webkit-border-bottom-left-radius:8px;
border-bottom-left-radius:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-right-radius:8px;
border-bottom-right-radius:8px;
-moz-border-radius-topright:8px;
-webkit-border-top-right-radius:8px;
border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-left-radius:8px;
border-top-left-radius:8px;
}
.Table table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}
And my HTML
<div class="Table" >
<table align='center' summary='blank Sum'>
<caption><br>
Please enter the Emails of the people you want to invite.
<br> <br>
</caption>
<tr>
<td>Party ID</td><td>Party Name</td><td>Date</td><td>Sales</td>
<td>blah</td> <td>blah</td> <td>blah</td><td>blah</td>
</tr>
</table>
</div>
Quick answer
Have a fiddle!
CSS
table caption { background: #F00; }
Slower Answer
The .Table div seems superfluous. I would have something like this:
Have a fiddle!
HTML
<table summary='blank Sum'>
<caption>
Please enter the Emails of the people you want to invite.
</caption>
<thead>
<tr>
<th>Party ID</th>
<th>Party Name</th>
<th>Date</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
CSS
table {
width: 500px; /* whatever width */
margin: 0 auto; /*center table*/
}
table caption {
padding: 10px;
background: #F00;
}
I am targeting Chrome and other CSS3 compliant browsers and would like to have border separation for every other row.
The CSS I currently have working for every row looks like this-
table{
border-collapse:separate;
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
What I would like to achieve is this:
CSS
table{
border-collapse:separate;
}
table tr:nth-of-type(odd){
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
HTML
<table>
<tr>
<td>a-one</td><td>a-two</td><td>a-three</td>
</tr>
<tr>
<td>a-four</td><td>a-five</td><td>a-six</td>
</tr>
<tr>
<td>b-one</td><td>b-two</td><td>b-three</td>
</tr>
<tr>
<td>b-four</td><td>b-five</td><td>b-six</td>
</tr>
<tr>
<td>c-one</td><td>c-two</td><td>c-three</td>
</tr>
<tr>
<td>c-four</td><td>c-five</td><td>c-six</td>
</tr>
</table>
The data is in two row sets and needs to be connected, whereas different sets need to be separated. I would like to keep it in table form to take advantage of the browsers auto-column widths. It seems like border-spacing can only be achieved on the table level. I am already using borders for styling so transparent borders is not a viable option.
Any chance for me- or I am I stuck?
JS-fiddle here identical to above here: http://jsfiddle.net/sSba4/
I'd argue that if the data needs to be visually chunked in separate containers, perhaps the most semantic solution would involve using multiple tables.
However, if you want to keep everything in a single table for whatever reason, then you would need to introduce non-semantic markup to create those visual separations, as border-spacing is a property of the table, not of the row or cell.
<table>
<tr><th></th></tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
</tr>
<tr><th></th></tr>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
<tr><th></th></tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
</table>
CSS
table {
border-collapse:collapse;
}
table tr td {
border: solid #ccc 1px;
padding: 5px 7px;
}
table tr th {
border: none;
padding-top: 5px;
}
See it in action here http://jsfiddle.net/wYCNg/
How about adding an additional row with transparent borders?
html:
<table>
<tr><td>a-one</td><td>a-two</td><td>a-three</td></tr>
<tr><td>a-four</td><td>a-five</td><td>a-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>b-one</td><td>b-two</td><td>b-three</td></tr>
<tr><td>b-four</td><td>b-five</td><td>b-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>c-one</td><td>c-two</td><td>c-three</td></tr>
<tr><td>c-four</td><td>c-five</td><td>c-six</td></tr>
</table>
css:
table{
border-collapse:collapse;
}
td{
border: 1px solid black;
padding: 5px;
}
tr.break, tr.break td{
border:none;
height:5px;
padding:0;
}
I've just been considering the same matter. If you put div element inside td, you can use plenty of box-model properties, eg. margin. If you additionally hide td borders you can use margin to set space between cells, rows, cols.
#tab {
border-collapse:collapse;
}
#tab td{
padding:0px;
}
#tab td>div {
width:50px;
height:50px;
background-color:#97FFF8;
margin:1px;
}
#tab td:nth-child(1)>div {
margin-right:10px;
}
#tab tr:nth-child(1) div {
margin-bottom:10px;
}
<table id="tab">
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>
I want to add a ::before selector on some table cells what has a position:absolute , but it fails:
table{ border:1px solid #ccc; padding:10px; }
table td{ border:1px solid #ccc; padding:5px; }
.useBefore::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
I noticed that if I add the ::before to all of the tr's then it works:
table{
border:1px solid #ccc;
padding:10px;
}
table td{
border:1px solid #ccc;
padding:5px;
}
tr::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
But this is not what I want, because I want to add it only on some of them.
I'm not sure why it fails exactly, but you could add it on the first table cell instead.
.useBefore td:first-child:before{
content:'before';
position:absolute;
}