无法覆盖现有的CSS

Question

I am using the example mentioned here in my project. I want to stretch the table to fit the whole page.

So, I did:

html, body{
    height: 100%;
}

#gridContainer {
    height: 100%;
}

table{
    width: 100%;
    height: 100%;
}

The problem is, only the table header appears on the page and it is stretched properly. The rows do not show up. I also tried to place the <script> before the <style> , but no luck.

How do I fix this?

Answer 1

Make the below change.

table, div {
   width: 100% !important;
}

Answer 2

.dojoxGridxBody, .gridContainer, table, #gridContainer {
    width: 100% !important;
}

If you want to make no other changes you will have to use !important to override some of the original CSS. But you can use the chrome inspector to find out what this style is overriding, remove the widths that would be set without this in the old CSS and then remove the !important

This page is far from ideally laid out however, as when you change the column structure the page just gets wider and wider. You have multiple tables and divs within these when actually you only need one table.