locked
Nested Table RRS feed

  • Question

  • User-797751191 posted

    Hi

      I have below code & i want below given rows within another table and in centre of first table 

    <table id = "myTbl" class="tg" style="margin: 0px auto; width: 1000px;">
    <tr> <td><asp:Label ID="lblNo" runat="server" Text=""></asp:Label></td> <td><asp:Label ID="lblDate" runat="server" Text=""></asp:Label></td> <td><asp:Label ID="lblAmount" runat="server" Text=""></asp:Label></td> </tr> <tr> <td><asp:Label ID="lblNo0" runat="server" Text=""></asp:Label></td> <td><asp:Label ID="lblDate0" runat="server" Text=""></asp:Label></td> <td><asp:Label ID="lblAmount0" runat="server" Text=""></asp:Label></td> </tr>
    </table>

    Thanks

    Sunday, June 30, 2019 4:27 AM

Answers

  • User-158764254 posted

    You've got the width of the above table set to 1000px - so in order for the margin auto to kick in and center it, the outer table cell's width would need to be larger than 1000px;

    Here's a quick example of nested tables with the inner table being centered.  I've added some colored borders so you can better see what's happening.

    <table style="width:500px;border:1px solid red;">
      <tr>
        <td>outer table</td>
      </tr>
      <tr>
        <td>
          <table id="myTbl" class="tg" style="margin: 0px auto; width: 200px;border:1px solid green">
            <tr>
              <td>inner table</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    here's the fiddle:

    https://jsfiddle.net/Lcp2kx3h/1/

    You might also consider removing the width style from the inner table. 

    https://jsfiddle.net/Lcp2kx3h/3/ 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, June 30, 2019 10:33 AM