Question

I have the following DIV. When this renders, I have noticed that the table has a few pixels around 5-10px padding even though I haven’t specified it. I need the table to stick right on the top of the DIV. How do I do it?

<div data-role="page" id="page2" >

<div data-role="content" align="top" >  

        <table border="0" align="CENTER" cellspacing="0" width="100%" style="vertical-align: text-bottom;" >
        <tr>
        <td>
            <div id="question" class="question">
            <Style>
                #question{
                  font:10px;
                }
            </style>        
            </div>
        </td></tr><tr>
        <td style="text-align:center;">
            <div class="ui-grid-b" >
                <div class="ui-block-a"><button id="button1" type="submit" data-theme="c" style="font-size:0.8em;"></button></div>
                <div class="ui-block-b"><button id="button2" type="submit" data-theme="c" style="font-size:0.8em;"></button></div>   
                <div class="ui-block-c"><button id="button3" type="submit" data-theme="c" style="font-size:0.8em;"></button></div>  
            </div>
        </td>
        </tr>
        </table>
    <!--/div-->
</div>

</div>

Answer 1

You can try this

<div data-role="content" align="top" style="padding:0 !important">
<!-- Your table markup goes here -->
</div>

jsFiddle