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.
Related
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 am trying to use css bootstrap framework in my project
I am using table with the following classes table table-bordered table-striped
I want to remove the borders from all the column except the first column.
Here is my table in a fiddler https://jsfiddle.net/8yf0v3xt/16/
Basically in this screenshot, I only want to remove the vertical borders in the red rectangle border.
<table class="table table-bordered table-striped">
<thead>
<tr><th></th><th></th>...</tr>
</thead>
<tbody>
<tr><th score="row"><th></td><td></td>...</tr>
...
</tbody>
</table>
EDITED
Or, if I remove the table-bordered class, how can I only add a column on the very first column? something like this screenshot
How can I do that?
You need to look into the :first-child pseudo selector. Link here
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
You can select all of the td elements and remove the border from them all with:
table tr td { border: none; }
And then to add unique styling to just the first element:
table tr td:first-child { border: default; } /* Or whatever styling you may wish..
The same can be done with :last-child which will of course select the last element in oppose to the first.
And if you need to be even more specific again.. You can use :nth-child(x) where x is the number of the element that you wanted.
Fiddle: https://jsfiddle.net/8yf0v3xt/18/
UPDATE
Fiddle: https://jsfiddle.net/8yf0v3xt/22/
I've removed the .table-bordered class and added the following CSS:
table { border: 1px solid #ddd; }
table.table tr, table.table tr th, table.table tr td { border: none; }
table.table tr th:first-child, table.table tr td:first-child { border: 1px solid #ddd; }
I have used the pseudo selectors like explained above to add styling to just the first column.
I am trying to add border-bottom to <tr> element of table as below but it is not working
<table>
<tr style="border-bottom: 1px solid black !important;">
it is working when I add the style to <td> but not on <tr>. Can you please let me know how to fix it?
Thanks
You cannot apply a border on tr element, you need to apply a border on td, or you need to use border-collapse for your table element
Demo (Applying border-bottom to td)
Demo 2 (Applying border-bottom to tr if used border-collapse)
table {
width: 100%;
border-collapse: collapse;
}
table tr { /* Use table tr td if not using border-collapse property */
border-bottom: 1px solid #eee;
}
Note: Avoid using inline styles, you will feel hard to change them
at certain point, also, avoid using !important unless required,
consider using more specific selectors instead
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have two tables on my site, those are named:
<table class="table1">
<table class="table2">
I am trying to reference to table1's td, tr and th using:
table.table1 td, tr, th {
border: 1px solid red;
}
but it applied to both my tables and I can't overwrite the styling to table2. What went wrong?
The commas in between each selector means a new selector. So the tr and th selector are generic to all tables and not just table1. So you need to specify table1 for each of those selector .
table.table1 td, table.table1 tr, table.table1 th {
Do this:
table.table1 td, table.table1 tr, table.table1 th {
border: 1px solid red;
}
You must access tr, th through parents only if you want to apply particular style, every rule is separated by comma. You must reference the parent's class to apply style to tr, td childs
You applied css style to all tr, th from page.
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...