This is my view table:
<tr>
<th><p>ID</p></th>
<th><p>NAME</p></th>
<th><p>CLASS</p></th>
<th><p>EDIT</p></th>
<th><p>DELETE</p></th>
</tr>
This is my css file:
table.mytable tr{
background-color: #ffff99;
}
For highlights rows using hover, it is not working for me. i don't know where i did wrongly kindly help on this issue?
Many thanks,
viswa
User :hover selector to hover color:
table.mytable tr:hover{
background-color: #ffff99;
}
<table class="mytable">
<tr>
<th><p>ID</p></th>
<th><p>NAME</p></th>
<th><p>CLASS</p></th>
<th><p>EDIT</p></th>
<th><p>DELETE</p></th>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>2</td>
<td>edit</td>
<td>delete</td>
</tr>
</table>
tr:hover {
background-color: #ffff99;
}
Check here
try this one:
ADD P:hover selector to hover color:
p:hover{
background-color: #ffff99;
}
Thanks
DEMO HERE
OR
.mytable{
width:100%;
border-collapse:collapse;
border:#4e95f4 1px solid;
}
.mytable td{
padding:7px;
border:#4e95f4 1px solid;
}
.mytable tr{
background: #b8d1f3;
}
.mytable tr:hover {
background-color: #ffff99;
}
DEMO UPDATED HERE
viswa.
To highlight on hover, you need to add the css for hover too. Since, you are enclosing your rows in <p> tags, you can use the following in you css file.
p:hover{
background-color: #ffff99;
}
Make sure there is no space between : and the word 'hover'.
Related
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>
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;
}
I am trying to face a little problem i have encountered with.
I am designing a map in leaflet. What i want to achieve is add a HTML label above each marker in a leaflet map, like in this photoshoped example:
Ok the code for each label to display it is:
HTML
<table>
<tr>
<td class="red"></td>
<td class="yellow"></td>
<td class="orange"></td>
<td class="blue"></td>
</tr>
</table>
CSS
table{
border-collapse: collapse;
}
td{
padding:20px;
border:5px solid black;
}
.red{
background-color:#F15E66;
}
.yellow{
background-color:#FFDB64;
}
.orange{
background-color:#F58326;
}
.blue{
background-color:#85B1DE;
}
check https://jsfiddle.net/YameenYasin/cx1ka3Ly/ for the live code.
Ok the problem comes when leaflet labels only allow to add one unique CSS entry for each label. Example:
marker.bindLabel('<table><tr><td class="red"></td><td class="yellow"></td><td class="orange"></td><td class="blue"></td></tr></table>',
{noHide: true, className: "onlyone", offset: [-10, -40] });
Notice the className: "onlyone" property. I can only put one css there and the "class" tags added in the html code are not executed (they do not work).
My conclusion is that i need to add all the CSS code in only one classname called "onlyone" so that then i can do className: "onlyone".
Is this possible?
Regards,
It's possible to add a single class to the tr and then target the children by 'number' using nth-child as follows.
table {
border-collapse: collapse;
}
td {
padding: 20px;
border: 5px solid black;
}
.multi td:nth-child(1) {
background-color: #F15E66;
}
.multi td:nth-child(2) {
background-color: #FFDB64;
}
.multi td:nth-child(3) {
background-color: #F58326;
}
.multi td:nth-child(4) {
background-color: #85B1DE;
}
<table>
<tr class="multi">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here you are:
https://jsfiddle.net/cx1ka3Ly/2/
table{
border-collapse: collapse;
}
td{
padding:20px;
border:5px solid black;
}
.onlyone:nth-child(1){
background-color:#F15E66;
}
.onlyone:nth-child(2){
background-color:#FFDB64;
}
.onlyone:nth-child(3){
background-color:#F58326;
}
.onlyone:nth-child(4){
background-color:#85B1DE;
}
Click the link http://jsfiddle.net/anglimass/njAFp/
I want border left and right some space:
Now:
Want:
Please watch the "want image" left and right side. I struck 'table-row' padding(left and right). Anybody know how to do this?
I don't think you can do it on TR level. How about TD level:
table tbody tr td {
border-top: 1px solid red;
border-bottom: 1px solid red;
}
table tr td:first-child {
padding-left: 20px;
border-left: 10px solid red;
}
table tr td:last-child,
td.last-td {
padding-left: 20px;
border-right: 10px solid red;
}
This would be important in terms of x-browser compatibility as well.
EDIT: you can drop the above into your fiddle and look at it in ie7, add 'hacky' 'last-td' selector to your last TD (ie7 does not support 'last-child', but does support 'first-child')
It's kind of hacky, but it produces the effect you are looking for:
http://jsfiddle.net/njAFp/3/
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>lai</th>
<th>pola</th>
<th>vaala</th>
<th>elah</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="blank"></td>
<td>ennala</td>
<td>yamla</td>
<td>varamattala</td>
<td>vettiruven</td>
<td class="blank"></td>
</tr>
</tbody>
</table>
table{width:400px; height:auto; background:silver;border-collapse:collapse;}
table thead{}
table tbody{}
table tr{ background:silver;}
table tr th{ padding:5px; background:silver;}
table tr td{ border-bottom:1px solid red; border-top:1px solid red; padding:5px; background:#eee;}
td.blank { width:20px; border:0; }
Is it possible to highlight table row on hover (something like this) using CSS only (without JavaScript)?
Yes, a row is possible but not a column.
tr:hover {
background-color: lightyellow;
}
Yes it's possible but you have to worry about browser compatibility here is an example
<style type="text/css">
.tbl {width: 640px;}
.tbl tr {background-color: Blue; height: 24px}
.tbl tr:hover {background-color: Red;}
</style>
<table class="tbl">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
works with most browsers
table tr:hover td {
background: #efefef;
cursor: pointer;
}
If you don't care about Internet Explorer, the :hover CSS pseudo-class works with any element.
If you do care about IE, you can find a workaround here.
<style type="text/css">
tr.tr-hover-class:hover {
background: grey !important;
}
</style>
<table>
<tr class='tr-hover-class'></tr>
</table>
In this case you would add it to a table row using a stylesheet rule as in this CSS code example below:
tr:hover {
background-color: #ffff99;
}
Full Example:
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
background: #b8d1f3;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: #ffff99;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>