How to disable style inherit from parent element

Question

Width in in parent table is automatically inherited to child table.

HTML

<table class="datagrid">
    <tr><td>sdfdsfds</td></tr>
    <tr><td>
             <table class="gridpager">
             <tr><td>1</td></tr><tr><td>1</td></tr>
             </table>
    </td></tr>
    </table>

CSS

.datagrid table {
    width: 100%; 
}

.gridpager table {
    float: right;
}

If i add width:auto in gridpager class it will works.but need to override all style of parent in child class.Is there any other solution other than this?

Answer 1

Make the css changes like following

table.datagrid {
    width: 100%; 
}

table.gridpager {
    float: right;
}