HTML table border won't go away

Question

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?

change the `;` for a space before `!important` ( border: 0 !important; ). The semicolon goes to the end of the rule. And the same with all rules. It's a typo — jeprubio, May 24 '20 at 14:15
similar to: https://stackoverflow.com/questions/5684144/how-to-completely-remove-borders-from-html-table try border:none; — VR7, May 24 '20 at 14:15
You semicolons are in the wrong place. They should be at the end of the line, not in the middle. I.e. put them after your `!important` property. Also remember that order of CSS matters, so make sure that your CSS doesn't get overwritten by other styles later on. — Martin, May 24 '20 at 14:19

score 2 · Accepted Answer · answered May 24 '20 at 14:20

2

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.

answered May 24 '20 at 14:20

Mr. Simmons

448
3
14

1

Thank you @Mr. Simmons! – marcnyc May 24 '20 at 14:24
@marcnyc Make sure to mark which answer is the correct one so other people with the same issue know where to look :) – Mr. Simmons May 24 '20 at 14:25

score 1 · Answer 2 · answered May 24 '20 at 14:16

1

Try !important keyword before semicolon.

table, th, tr, td {
    border: none !important;
    outline: none !important;
};

answered May 24 '20 at 14:16

yinsweet

2,823
1
9
21

score 0 · Answer 3 · answered May 24 '20 at 14:25

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;
}

A higher specificity would also solve the issue. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Rickard Elimää, May 24 '20 at 14:40

HTML table border won't go away

3 Answers3