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.
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.
If I have a table with ID tableProducts and it's style is defined in products.css like this:
#tableProducts {
border-collapse:collapse;
}
How do I format the CSS rule so that any td, tr, or p within tableProducts will inherit the CSS rules so that any other table with a different ID will not inherit the rules defined like so:
#tableProducts tr, td {
text-align:center;
}
The text-align works properly however other tables on the page are applying the tr, td rules defined above.
I am aware that I could simply define a class for the elements <tr> and <td> to use, but I am trying to better my understanding of CSS.
The reason other tables inherit the styles is because the second selector after the comma targets all the <td> elements in the page, in other words you should limit the scope of your selector by prefixing it with #tableProducts, like so:
#tableProducts tr, #tableProducts td {
text-align: center;
}
NOTE: it's a good practice to put each selector in a new line, this helps you a lot with clarity and makes your code much more readable, it's also a bad practice to use IDs in your CSS, use classes instead, also when trying to name your classes make sure they contain only lowercase letters, numbers and hyphens, so the best answer to your question would be:
.table-products tr,
.table-products td {
text-align: center;
}
Hope it helped : )
You need to replace ...
#tableProducts tr, td {
text-align:center;
}
... with ...
#tableProducts tr, #tableProducts td {
text-align:center;
}
Explanation
Selector #tableProducts tr, td applies to all elements that match one of these two selectors :
#tableProducts tr
td
This means that selector #tableProducts tr, td will apply to ALL td elements.
Selector #tableProducts tr, #tableProducts td applies to all elements that match one of these two selectors :
#tableProducts tr
#tableProducts td
Replacing #tableProducts tr, td with #tableProducts tr, #tableProducts td therefore means that your selector no longer applies to all td elements, but only to td elements inside #tableProducts, which is what you're going for!
Try,
#tableProducts tr,#tableProducts td{
text-align:center;
}
https://jsfiddle.net/0qvm6tc6/
#tableProducts > tr, td {
text-align:center;
}
#tableProducts tbody tr td{
text-align:center;
}
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.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Suppose I have an HTML table that has been assigned to the class dependency_table.
How can I style the tr, th, and td children of that that specific table without having to put class="dependency_table" in all of the child tags?
Here is what I have tried so far:
/* --- DEPENDENCY TABLE STYLING --- */
.dependency_table {
border-collapse: collapse;
color: pink;
}
.dependency_table ~ td {
background: #FAFAFA;
text-align: center;
}
.dependency_table ~ th{
background: #DFDFDF; /* Darken header a bit */
font-weight: bold;
}
The general sibling selector hasn't worked for me yet with this syntax. What is the correct way of doing this?
If I understand correctly you want to do this:
/* --- DEPENDENCY TABLE STYLING --- */
.dependency_table {
border-collapse: collapse;
color: pink;
}
.dependency_table td {
#your style
}
.dependency_table th{
#your style
}
.dependency_table tr{
#your style
}
Another alternative to cover more tags at once:
.dependency_table td, .dependency_table tr, .dependency_table th{
#your style
}
I have following CSS:
table tbody tr:last-child td {
padding-top: 7px;
border-bottom: 0;
}
table tbody tr:first-child td {
padding-top: 6px;
}
Now I may have a table with just one row.
The only table row is now assigned to first-child instead of last-child, but I want it to be the other way around.
Is there a way without Javascript?
This can't be. You must have some mistake in your markup. If it really is the only tr, both last AND first will match.
See example
However, which CSS will be applied depends on the order of you css-rules. So you can determine whether padding-top: 7px; or padding-top: 6px; shall applie by placing the rules accordingly.
edit:
as your problem is caused by a plugin, which inserts a row automatically at the end, you can simply use :nth-last-child(2) to match the second-last element. (Note however that Browser-support for nth-last-child is slightly worse than last-child)
You can make a rule which will be only if tr is first-child and last-child at the same time, and this table tbody tr:first-child:last-child td add to the same styles as table tbody tr:last-child td. It will gonna look like this:
table tbody tr:last-child td,
table tbody tr:first-child:last-child td{
padding-top: 7px;
border-bottom: 0;
}
Here seems to work :) -
http://jsfiddle.net/HjZU4/