I'm not a CSS expert but I believe my code should work (?).
I can make my code work without applying any class, but sometimes I need to restrict some tables from inherit a class.
JSFiddle working without applying a class in the <table>.
JSFiddle not working while applying a class in the <table>.
As #panther already said, you have a bed selector.
However, if you want to use that style for the table that has only .responsiveTable class, then you'll have to use this selector:
.responsiveTable,
.responsiveTable thead,
.responsiveTable tbody,
.responsiveTable tfoot,
.responsiveTable th,
.responsiveTable td,
.responsiveTable tr {
display: block
}
Which looks quite nesty. So I'd recommend you use a CSS preprocessor, like SASS where the selector would look like:
.responsiveTable{
thead, tbody, tfoot, th, td, tr{
display: block
}
}
Which would generate the above selector.
On the 3rd line there is bad selector. The correct one is
.responsiveTable, thead, tbody, tfoot, th, td, tr
Your didin't work because commas missing and .responsiveTable table doesn't exist. Just table.responsiveTable.
in the not working one you forgot the commas int the css:
.responsiveTable,table,thead,tbody,tfoot,th,td,tr {
display: block
}
Related
I have an HTML table with no id or class definitions and I'm trying to make it have no border.
I'm inserting the table into a page that calls other stylesheets that might have definitions for tables, but I'm adding the following right before the table that should remove all previous possible classes:
table, th, tr, td {
border: 0px;!important
border-collapse: collapse;!important
border:none;!important
outline:none;!important
}
and yet the table border does not go away... how can I tackle this?
Your code is almost correct. You need to have the !important tag before the semicolon. Not after it.
Example:
table, th, tr, td {
border: 0px !important;
border-collapse: collapse !important;
border:none !important;
outline:none !important;
}
That will get rid of the border, but just also note that td and th elements also have 1px of padding by default as well. So going padding: 0px !important; in the code example above will remove it.
Try !important keyword before semicolon.
table, th, tr, td {
border: none !important;
outline: none !important;
};
Depending on how your application is built (mainly in terms of order of CSS), you may not even need the !important; property. Remember, order of CSS matters, so regardless, you should make sure that the styles you intend to have aren't overwritten later on.
Right now your CSS contains syntax errors. Your semicolon is in the wrong place. The smicolon is used to close the arguments and should therefore be at the end of the line.
This is how your CSS should look like:
table, th, tr, td {
border: 0px !important;
border-collapse: collapse !important;
border:none !important;
outline:none !important;
}
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;
}
How do I add a hover to the following:
table.pvtTable tr th, table.pvtTable tr th
I want it added to the final "th" element.
If I do:
table.pvtTable tr th, table.pvtTable tr th:hover
everything here is applied by default.
Thanks
It will work for the last th :
table.pvtTable tr th:last-child
And the same element with :hover selector :
table.pvtTable tr th:last-child:hover
I'm styling a table and I'm using various first-child, nth-child and last-child declarations such as the below:
.thankYouTable tbody tr td:first-child,
.thankYouTable tbody tr td:nth-child(4),
.thankYouTable tbody tr td:nth-child(6),
.thankYouTable tbody tr td:nth-child(7),
.thankYouTable tbody tr td:nth-child(8)
{
border-right:1px solid #fff;
}
Is there a way for me to shorten this syntax? Its just out of curiosity really as I've had to do this quite a bit and it makes the stylesheet quite "messy". Whilst I can understand it, it may take others in future longer to decipher this. Is there a "best practice" for doing this kind of thing or is what I've done ok? (Realise this may be subjective so feel free to not answer this part).
For example would this not work:
.thankYouTable tbody tr td:first-child,
.thankYouTable tbody tr td:nth-child(4),(6),(7),(8)
{
border-right:1px solid #fff;
}
And I'm talking about pure CSS here, not using any kind of script.
The only way i can see you shorten it down is by using equation:
[..]
.thankYouTable tbody tr td:nth-child(4), //fourth element
.thankYouTable tbody tr td:nth-child(n+6) //every element after and including the 6th element
[..]
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;
}