Excuse my CSS ignorance here.
I'm trying to apply a background color to a row using the following css:
tbody tr:hover {
background-color: #F69;
border: thin solid black;
}
The HTML table has some inherent column colors like shown below. The CSS above will not change the color to #F69 and keep the colors #993300. Is there a way to override this HTML cell coloring?
tbody tr:hover {
background-color: #F69;
border: thin solid black;
}
<table>
<tr>
<th>11 lbs</th>
<td></td>
<td bgcolor="#993300">1</td>
<td bgcolor="#993300">2</td>
<td bgcolor="#993300">3</td>
<td> </td>
</tr>
</table>
I think you are want something like this-
tr td:hover {
background-color: #F69;
border: thin solid black;
}
<table width="100%">
<tr>
<th colspan="5">11 lbs</th>
</tr>
<tr>
<td width="20%"> </td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%" bgcolor="#993300"></td>
<td width="20%"> </td>
</tr>
</table>
I hope it will helps you.
I'm trying to apply a background color to a row using the...
If I read your question correctly, and considering that you have both th and td elements in your table, it seems like you are trying to change the background-color of the row's child elements at the same time when hovering over the row.
If that's the case, then this is your solution:
tr:hover td,
tr:hover th {
background-color: #F69;
border: thin solid black;
}
All of the row cells will be highlighted on hover.
Otherwise, if you are trying to change the background-color one cell at a time, I recommend Maddy's answer.
Try it Online!
Related
I am taking an online course and learning javascript, html5 and CSS. I am having an issue with getting my table to be formatted with my css file. It is inside a DIV tag:
<div data-role="main" class="ui-content">
I am trying to do with my CSS:
table th, td { border: 1px solid black;}
And I tried doing .ui-content table th, td {} and nothing and I tried a few others, but I am still stuck with it. Any help would be greatly appreciated. Thanks
When have space between element you are targeting children of that element while when you have commas you are targeting multiple elements.
In your case to be able to apply a border to the th, td and table you would need to do:
table, th, td { border: 1px solid black;}
But if you want to apply the css to the th and td inside of a table element you would need to do
table td { border: 1px solid black;}
table th { border: 1px solid black;}
With the html you have
<div data-role="main" class="ui-content">
<table>
<tr>
<th>Grade</th>
<th>Numeric Equivalent</th>
<th>Explanation</th>
</tr>
<tr>
<td>A</td>
<td>95-100</td>
<td><strong>Excellent.</strong></td>
</tr>
</table>
</div>
Your css should be
table { border-collapse: collapse; }
table th { border: 1px solid black; }
table td { border: 1px solid black; }
Here's vary basic sample, now may be tell what's the problem
table, th, td { border: 1px solid black;}
<table>
<tr>
<th>
Header 1
</th>
<th>
Header 2
</th>
</tr>
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
</table>
I have a problem, I need to change a table background-color, I can only change the css. I want a hover on a table tr but some of the table td have an inline bg-color and I can't get a hover over it. !important doesn't work. Here is my problem.
CSS
table{
border: 1px solid black;
}
table tr:hover{
background-color: pink !important;
}
HTML
<table>
<tr>
<td style="background-color:green;">test1</td>
<td>test2</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
</table>
Adding rules for td fixed your problem
table tr:hover td
table{
border: 1px solid black;
}
table tr:hover,
table tr:hover td {
background-color: pink !important;
}
<table>
<tr>
<td style="background-color:green;">test1</td>
<td>test2</td>
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
</table>
Your style is Incorrect, In the CSS you try to change the tr background, not the td.
Replace the css by this and it works fine if you want change all the hover line in pink :
table tr:hover td{
background-color: pink !important;
}
Replace the css by this and it works fine if you want change the hover td in pink :
table td:hover{
background-color: pink !important;
}
I am trying to create a border on top of another element's border.
I have something like the following
html
<table class='table'>
<tr>
<td>123</td>
<td class="pick">123</td>
<td>123</td>
</tr>
<tr>
<td class="second" style="text-align:center;" colspan='3'>123</td>
</tr>
</table>
css
.pick {
border-bottom:solid 5px green;
}
.second {
border:solid 5px red !important;
background-color: green;
}
http://jsfiddle.net/j8zt8sb3/1/
Basically I want to create a gap look for the <td> that has a class 'pick'. Everything works fine on every browser but the red border will cover the green border in IE which means there is no gap. Is there anyways to fix this? Thanks a lot!
Just add this property:
table {
border-collapse: collapse;
}
I am trying to make a table with rounded corners AND a single solid border between <tr>'s. However, I seem to have a bit of a problem correctly using border-collapse. When I set border-collapse: separate, I get the following:
Result - border-collapse: separate
Code
HTML
<table>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
CSS
table, tr {
border: 1px solid black;
border-collapse: separate;
border-color: #ACACAC;
border-radius: 5px;
}
However, when I use border-collapse: collapse, I get the correct line between the <tr>'s but the corners are not rounded, as see here:
Result - border-collapse: collapse
Does anyone know how to get both the line between the <tr>'s WITH the rounded corners?
Thanks so much!
Add cellpadding = 0 and cellspacing = 0 at the table element ,remove border-bottom of the tr elments and add this CSS border-bottom for all td elements except last one like:
tr:not(:last-child) td{
border-bottom:1pt solid #ACACAC;
}
table,
tr {
border: 1px solid black;
border-color: #ACACAC;
border-radius: 5px;
}
td {
padding: 5px;
}
tr:not(:last-child) td {
border-bottom: 1pt solid #ACACAC;
}
<table cellspacing=0 cellpadding=0>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
<tr>
<td>
This
</td>
<td>
that
</td>
<td>
the other.
</td>
</tr>
</table>
It is working :
http://jsfiddle.net/csdtesting/dngpq4hb/3/
I am making a form in html, and I am using a table for layout of my input controls and labels.
For each input of a form, there is one label associated with it.
I want a border to appear around each pair of adjacent cell that is a label and its associated input tag.
I tried making a div around the two adjacent <td> tags but it says "invalid tag" as only <td> are allowed inside a <tr> tag.
Is there anyway to do it either in CSS or anything else ?
My HTML sample code :
<table>
<tr>
<td>Date</td>
<td><input type="text"></td>
<td>Name</td>
<td><input type="text"></td>
</tr>
</table>
Below is a screenshot of what I want to achieve.
You've not collapsed your table border, try this
Demo
table {
border-collapse: collapse;
}
table, td {
border: 1px solid #c00000;
}
If you could apply classes to your td's you could try this:
<table cellspacing="0">
<tr>
<td class="label">Label1: </td>
<td>input1</td>
<td class="label">Label2: </td>
<td>input2</td>
</tr>
</table>
With the following css:
table {
background-color: silver;
border-collapse: collapse;
}
td {
padding: 5px;
border: 1px solid red;
border-width: 1px 1px 1px 0px;
}
td.label {
border-width: 1px 0px 1px 1px;
}
http://jsfiddle.net/H3p8e/2/
Try to apply border-collapse:collapse; rule.