asp.net gridview cellpadding doesn't work when the gridview is placed within a html-table

Question

I've put a gridview inside an ordinary html-table due to some presentation issues. But then the cellpadding property doesn't work. As soon as the gridview is taken outside the table, cellpadding works as it should. So I guess this has something to do with the final rendering of the gridview in the browser.

Anyone who knows if this is possible at all? Are there any workarounds which includes gridviews in a table?

Answer 1

The GridView (which in HTML is also a table) probably inherits the cellpadding from the parent.

In this snippet it inherits the padding of 3 while the GridView CellPadding is 0.

<style>
    .parentTable td {
        padding: 3px;
    }
</style>

<table class="parentTable">
    <tr>
        <td>
            <asp:GridView ID="GridView1" runat="server" CellPadding="0"></asp:GridView>
        </td>
    </tr>
</table>

So if you would add this piece of CSS, the GridView should display correctly in this example.

.parentTable table td {
    padding: 0px;
}

There are of course a lot more possibilities to solve this, depending on your template, stylesheet, bootstrapper etc.