Overriding a table's inline css width

Question

I have a table that has a static width set with inline css.

<table style="width:700px;"></table>

I cannot control the markup, and I'd like to use CSS to give that table a width of 100%. One solution is to use "display:block" to prevent the table from overflowing, but then the table cells collapse to the size of their contents, which is not what I want. Is this possible?

Here's a JSFiddle to illustrate the problem.

I've encountered many questions like this, but not this particular question. Here are some similar SO questions in case they're helpful to others:

CSS width and max-width combined

CSS: table {width:100%; display:block;} not working in Firefox

In the fiddle, the parent div is explicitly set to 500 pixels, while the table is set to 700px, which is causing the issue. Why can you not just do `
` — hesonline, Jul 08 '16 at 18:28

score 4 · Accepted Answer · edited May 23 '17 at 10:28

4

Use CSS's !important declaration

table{
    width:100% !important;
}

edited May 23 '17 at 10:28

Community

1
1

answered Jul 08 '16 at 18:27

JKirchartz

17,612
7
60
88

Welp, "I swear I tried that", but apparently not. Marking this as the answer unless somebody has a solution that doesn't use !important. Thanks! – launchoverit Jul 08 '16 at 18:32

score 0 · Answer 2 · answered Jul 08 '16 at 18:29

0

You have to make a style that says my custom style is more important than the "default" style.

To do that you have to use the !important clause.

table{ width: 100% !important; }

The above should give you what you want.

answered Jul 08 '16 at 18:29

Mike June Bug Captain

1,013
1
7
15

Overriding a table's inline css width

2 Answers2