what does this mean
table.my tr{
border-top: 2px solid black;
}
mean in CSS classes. How to manipulate them? Can we give simple name like
my{
border-top{
border-top: 2px solid black;
}
in tr tag of html table
The table.my tr css selector means "all tr tag inside a table tag with a classe my ".
You can see all selector here: https://www.w3schools.com/cssref/css_selectors.asp
If you want to only use the my selector, you will need to give the my class to each tr tag in your html file.
Related
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 want to apply a style to all cells (td elements) inside a given table, and not any other tables. Is there a way to do this in CSS without having to specify a class for each td in the table I want to apply the style to?
For example, let's say I want to make all cells in a particular table have a padding of 3px on all four edges. To do this for every td I could declare:
td { padding: 3px 3px 3px 3px; }
Problem: this applies to every single td on the page. I just want to apply to this a single, named table, or alternatively, to all tables of a given class.
Any ideas?
#someTable td { padding: 3px 3px 3px 3px; }
This will apply your style to only a specific table
.someTable td { padding: 3px 3px 3px 3px; }
This will apply the change to all tables with the given class
As others have answered, having the td element's styles declared as a descendant selector (learn more here) or a child selector (learn more here) belonging to a parent selector, instead of declaring them without the hierarchy would solve your problem.
The only thing I'd like to add is that the descendant and child selectors operate with a slight difference as mentioned below in the comments below:
.my_table_class td { padding: 3px; } // will apply to all td elements underneath
// .my-table-class (also to tables nested
// below)
.my_table_class > td { padding: 3px; } // will apply to td elements immediately
// under .my-table-class
add class to or id to table that you want to target for example
.yourTableClass td{Your Style here}
Use This.
td.tbl_class{your style;}
Is it possible to simplify the following css rule so that I do not have to duplicate the class selector .simpleTable.cellBorders for all elements (td and th)?
.simpleTable.cellBorders td, .simpleTable.cellBorders th {
border: 1px #ccc solid;
}
The idea is that td and th cells have a border if the table has the classes simpleTable and cellBorders assigned like:
<table class="simpleTable cellBorders">
<tr><th>My Header</th> ... </tr>
<tr><td>Some cell</td> ... </tr>
</table>
You can certainly use the universal selector (*) together with the child selector (>), as there is no other valid element besides th and td that could be inside a tr:
.simpleTable.cellBorders tr>* {
border: 1px #ccc solid;
}
Note that putting another child selector between .simpleTable.cellBordersand tr will not work as expected, as browsers (at least Firefox) will add a tbody element between the table element and its tr elements, as defined by the HTML 4.01 standard as well as the HTML5 standard:
Tag omission in text/html:
A tbody element's start tag can be omitted if the first thing inside the tbody element is a tr element, and if the element is not
immediately preceded by a tbody, thead, or tfoot element whose end tag
has been omitted. (It can't be omitted if the element is empty.)
look this :
.simpleTable tr > *{
border: 1px #ccc solid;
}
It seems like some tables are inheriting styles that they shouldn't.
I have a custom table class, and I want only tables that use that class to have a 1px width solid border, but for some reason other tables seem to use it randomly.
Here's the CSS for it:
.my_custom_table td, th { border: 1px solid gray; }
and here's the markup for a table that uses it for some reason:
<table border="0" cellspacing="0" cellpadding="2" class="customer-info"> ... </table>
I'm thinking the style says "for all td and td under the class .my_custom_table - use 1px solid border", or am I missing something?
Your CSS will apply to all <th> tags, not just those under the my_custom_table class.
Try this instead:
.my_custom_table td, .my_custom_table th { border: 1px solid gray; }
.my_custom_table td, th means all the td elements in something with a my_custom_table class AND all of the th elements. Notice that's not all the th in something with a my_custom_table class. Just all the th.
.my_custom_table td, .my_custom_table th
is what you want.
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}