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}
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;
}
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.
I want to remove the borders of the last row so it just seems like a gap. Any suggestions? Thank you!
Remove the border of the last row's cells
tr:last-of-type td {
border: none;
}
If you want it to look like a gap, use pseudo-selectors
table tr:last-child td{
border: none;
}
You can use the nth element of a particular type using the nth-of-type pseudo-selector.
<style>
tr:nth-of-type(n){
border: 0px;
}
</style>
Although it is not advisable to use a style tag in your HTML. You can always use a separate CSS file.
Alternatively, for the first and the last element, first-of-type and last-of-type can also be used.
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;}
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...