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;
}
Related
When using cellpadding="10" along with alternate row shading, it seems that the backgrounds of the alternative rows don't "expand" with the cellpadding. For example:
As you can see in the figure above, there are gaps between the background and the extra cellpadding. How do I make the background cover the entire row including the cellpadding?
Here's the HTML style behind it:
tr:nth-child(even) {background-color: #f2f2f2;}
They do, but you have to remove border-spacing from table and then adjust the cellpadding and/or the margins and paddings of the td and th elements.
By default tables have a spacing between cells, that spacing is not part of the 'content' of the cell but only of the table. Add a border on table, td and th to better understand it. For more information you better look at the MDN page about border-spacing.
Example without cellpadding:
table {
border-spacing: 0;
}
td, th {
padding: 10px 20px;
}
I have two different tables. I set text-center in all rows and cells but In one table I must to have last td and th like this :
tr:last-child > td:first-child {
text-align: right;
}
tr:last-child {
font-weight: 900;
}
And it works well, but to all my tables I create. In the second I want to be default td and tr, but it takes my earlier css with right text-align and font-weight.
How to do, to my css work only in one table? Not all?
add some class to your tables and use it to define the css rule. Define the specific rule for the class that you wanna to.
instead tr:last-child, use .tableClassName:last-child
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
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/
I think a td not within a table probably won't validate as HTML or XHTML and therefore the behavior is not well defined, so there probably is no practical use of td without table.
So in CSS, the table in
table td { padding: 0 2em }
is really not need, as td must be inside a table, isn't it true?
(Update: table td occurs such as in Sass, where programmers probably write style such as
table:
background: #fff
td:
border: 1px solid #000
and it will get compiled to table td for the td part)
The only difference is that table gives the selector higher specificity => rules in table td selector will always override rules in td selector.
No, it is not needed.
This, however, is why people do it:
table#tps_report td{ padding: 0 2em }
And then table is left as an orphan when it has no id purely out of habit. I am sure it also makes the task easier for the CSS+DOM parser.
It should not be necessary.
td { padding: 0 2em }
Just using TD will be more efficient as well not only in bytes but also in the application of the CSS rules to the markup.
Yeah td can only occur within a table element so styling via:
td { padding: 0em 2em; }
Is fine :)
This also applies to form and list tags (as well as others).
Typing:
form input { width: 50px; color:red; }
ul li { padding:5px 0; }
is the same as:
input { width: 50px; color:red; }
li { padding:5px 0; }