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.
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 want to change the background color of all td in a tr just using a class in the tr. I am using the following css
tr .yellow td{
background-color: yellow;
}
And I have following html
<tr class="yellow"><td></td> <td></td></tr>
But the background color is not changing. What is the mistake here?
You have a space before the class in your CSS declaration
tr.yellow td{
background-color: yellow;
}
You need to remove the space to indicate that the class is on the <tr> element. Without it you are suggesting that the hierarchy is:
tr, then something with a class of "yellow", then a td
e.g.
<tr>
<sometag class="yellow">
<td>
Which isn't what your DOM looks like.
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
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;
}