Aligning a table to the second column of another table - html

Question

I want to align the second <table> in the <div>. The table should start from the second column of the first table. Right now, the second table with the text “1111111111111” starts from the extreme left but I wish to align it to where the textboxes start in the first table.
Here is my HTML:
<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
<table border="1">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
</tr>
</table>
</div>

Answer 1

Set the margin-left value to 33% for the 2nd table using :nth-child(2)
table:nth-child(2) {
margin-left: 33%;
}
<div style="float: left; height: 250px;overflow:auto; display:block;margin-left: 10px">
<table border="1">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111</td>
</tr>
</table>
</div>

Answer 2

div {
display: table; /* Display the div as a table */
}
div > table {
display: contents; /* Ignore the tables and display their contents
as if they were contents of the div */
}
div > table:last-child tr:before {
content: ''; /* Insert a pseudo-element at the beginning */
display: table-cell; /* Display it as a cell */
}
div {
display: table;
}
div > table {
display: contents;
}
div > table:last-child tr:before {
content: '';
display: table-cell;
}
<div>
<table border="1">
<caption>Title</caption>
<tr>
<td>First Name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" /></td>
</tr>
</table>
<table border="1">
<tr>
<td>1111111111111</td>
</tr>
</table>
</div>
Note display: contents is not widely supported yet.

Answer 3

You can have a look at this code. Let me know if its working with you.
http://jsfiddle.net/FnK9D/13/
<div style="position:absolute;">
<table border="1" style="">
<tr>
<td style="padding-left: 10px; font-size: 24px;text-align: center" colspan="2">Title</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">First Name</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<asp:Label runat="server">Email</asp:Label>
</td>
<td style="padding-top: 10px;padding-left: 10px">
<input type="text" />
</td>
</tr>
<tr>
<td style="padding-top: 45px;"></td>
<td style="text-align: center"></td>
</tr>
</table>
<table border="1" style="float:right;">
<tr>
<td style="padding-top: 20px; word-wrap: break-word;text-align: center">1111111111111111</td>
</tr>
</table>
</div>