I have two tables, one with the id ='data'. My question is that i want to apply the below border properties for the table id='data' only but from the below code the css is being applied to both the tables.How to correct this
<style>
table
{
border-collapse:collapse;
}
table#data,th,td
{
border:1px solid black;
}
</style>
this should work:
#data,
#data th,
#data td
{
border:1px solid black;
}
because with table in the CSS selector You're gonna call all tables, unless You specify a class like table.class { ... } ;)
// edit
ok, i have to say:
table#data,
table#data th,
table#data td
{
border:1px solid black;
}
will work also...
the main thing is, that You specify the ID or class of Your desired element in the CSS to get Your style applied to Your desired element...
Related
We have a generic css style defined like this:
.table-container table tr:hover td {
background-color: #eaeaea;
}
This is used for all tables across application. However, I have to override it for a particular table on specific rows. I am attaching new css style at each <tr class=‘edited’> with this definition:
.edited {
background-color: #f8cbad;
}
But, when hovering over the row, it is using generic hover style, and I am not able to override it.
Can you please suggest how to override it so that I see same background color as edited style even on hovering the row?
I tried with following and tweaking, but didn’t work.
.table-container table tr:hover .edited td {
background-color: #eaeaea;
}
Ok, I have figured out after some trial. Answering to help others:
Defining hover for the specific style class did the trick:
.edited {
background-color: #f8cbad;
}
.edited:hover {
background-color: #f8cbad !important;
}
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 4 years ago.
I found a simple way to show a thin border around a html table:
https://www.w3schools.com/css/css_table.asp
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Now I want to apply this only to all tables with class "foo".
I tried this, but this does not work:
table.foo {
border-collapse: collapse;
}
table.foo, th, td {
border: 1px solid black;
}
This changes the style of all td tags. But I want only the td tags directly below a "foo" table.
What is the right way to do this?
Make CSS selection like...
table.foo, table.foo th, table.foo td {
....
Also here is a quick check for selectors.
https://www.w3schools.com/cssref/css_selectors.asp
Comma separator mean will apply style separately
Use:
table.foo td
Then will apply to all td under table with class foo
The space mean descendant of any level.
I am trying to make my table rows highlight when i hover my mouse over them
.Table .Popup tr:hover {
background-color:red;
}
Seems to work find on TD tags, but I seem to have trouble getting it to work for TR tags :
Fiddle :
http://jsfiddle.net/kUTDB/2/
Any idea what I am doing wrong?
The proper CSS should be this:
.Popup tr:hover td {
background-color:red;
}
.Popup .PopupRow:hover td {
background-color:red;
}
You can't (reliably) style a <tr>, so you need to apply the style to children <td>s on hover (hence tr:hover td.
Additionally, the .Table class doesn't refer to any elements in your fiddle, which may also be causing problems.
http://jsfiddle.net/kUTDB/12/
You can just do:
td:hover {
background-color:red;
}
try like this
.PopupContainer .Popup tr:hover {
background-color:red;
}
Fiddle
Your CSS selector was incorrect:
Both
table tr:hover {
background-color:red;
}
and
table .PopupRow:hover {
background-color:red;
}
will work here.
Fiddle: http://jsfiddle.net/kUTDB/7/
if you needed to be very specific, you could use this selector:
div.PopupContainer div.Popuptable table tbody tr.PopupRow:hover{
However, since longer selectors cost time, the more broad selectors are better. Really, you only need .PopupRow:hover here.
You need to do the td
tr:hover td {
background-color:red;
}
As stated on your previous question:
Your CSS selectors are not selecting anything.
.Table .Popup tr:hover {
background-color:red;
}
should be:
.Popup tr:hover {
background-color:red;
}
(See: http://jsfiddle.net/kUTDB/4/)
and
.Table .Popup .PopupRow:hover {
background-color:red;
}
should be
table tr.PopupRow:hover {
background-color:red;
}
or
table .PopupRow:hover {
background-color:red;
}
(See: http://jsfiddle.net/kUTDB/5/)
Mind you, these will both select the same elements so the selector with more specificity (the second one) will be the one that is actually used.
Your first selector, .Table .Popup tr:hover will match tr elements that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table.
Your second selector, .Table .Popup .PopupRow:hover will match any elements with a class of PopupRow that are currently being hovered over and that are descendants of any element with a class of Popup which are in turn descendants of any element of with a class of Table.
The markup in your fiddle does not reflect that structure and so nothing is matched by the selectors (which is why your style is not reflected).
.Popup tr:hover {
background-color:red;
}
This will totally work.
I have an HTML document where I have two different tables. One is class Alpha and one is class Beta. I want to assign this css to class Beta only...
td
{
border-style:solid;
border-top:thick double #ff0000;
}
I can not figure out how to assign this only to Beta. Does anyone know how?
Just apply the .beta class selector to the entire table and change your CSS code to apply a rule only to td decedents of .beta like this:
<table class="beta">
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
.beta td {
border-style:solid;
border-top:thick double #ff0000;
}
If you need to apply the rule to multiple elements within .beta simply add an additional selector like this:
.beta td,
.beta th {
border-style:solid;
border-top:thick double #ff0000;
}
Qapla'!
CSS lets you get specific with what elements rules are to be applied to. Just add this rule to the table.Beta td cell declaration and you're done.
table.Beta td
{
border-style:solid;
border-top:thick double #ff0000;
}
I use the following CSS to apply a top border to the last-child row of various tables:
.mytabs tr:last-child {
border-top:1px solid #000;
font-weight:bold;}
Now what I need to do is to override this style for one particular table. How can I override this style in one specific instance? Thanks.
You can wrap it a custom div id name example <div id="customFormat"></div> or give the table an id <table id="customFormat"></table>
In CSS, you can specify the custom styling just for that 1 table.
#customFormat {
border-bottom: 1px solid rgba(69,54,37,0.2);
}
Give a class specific table or to the last row of specific table and apply style
table.<specific_table> tr:last-child {
...your style
}
or
.mytabs tr.<specific_row> {
..your style}