I am creating a table inside another table. I have divided the columns to be the exact same ratio as the outer table. However, the columns are not aligned with outer table columns. Can anyone tell me what I am missing?
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%"test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
When I inspect the table with chromes web kit. I see that the tables with 3% then they are supposed to be, because of the text length. U can fix this by adding
table-layout: fixedto both your<table>elements.If U want to use a table header I suggest using
<th>(see here)