问题描述

html两个table的列不能对齐的问题

第一种写法能对齐：

<div><table class=""tableStyle"" sortMode=""true"" headFixMode=""true"" useMultColor=""true"" useClick=""false""  useCheckBox=""true""><tr>  <th style=""width: 40px""></th>  <th style=""width: 80px"">姓名</th>  <th style=""width: 40px"">性别</th>  <th style=""width: 40px"">年龄</th></tr></table></div><div id=""scrollContent"" ><table class=""tableStyle"" headFixMode=""true""><tbody>    <tr>      <td width=""40""><input type=""checkbox"" class=""hand"" name=""items"" value=""1""/></td>      <td width=""80"">          姓名1      </td>      <td width=""40"">            男      </td>      <td width=""40""><span class=""float_left"">      </span> </td>      </tbody></table></div>

但是第二种写法就不能对齐

    <div><table class=""tableStyle"" sortMode=""true"" headFixMode=""true"" useMultColor=""true"" useClick=""false""  useCheckBox=""true""><tr>  <th width=""25%""></th>  <th width=""25%"">姓名</th>  <th width=""25%"">性别</th>  <th width=""25%"">年龄</th></tr></table></div><div id=""scrollContent"" ><table class=""tableStyle"" headFixMode=""true""><tbody>    <tr>      <td width=""25%""><input type=""checkbox"" class=""hand"" name=""items"" value=""1""/></td>      <td width=""25%"">          姓名1      </td>      <td width=""25%"">            男      </td>      <td width=""25%""><span class=""float_left"">      </span> </td>      </tbody></table></div>

这是为什么？为什么用确定的数值px就能将2个table的列对齐，而用%的形式两个table的列就不能对齐

解决方案

那是因为第二个“姓名1”的width=“25%”，而第一个是80.。。。。。。。。
13年的问题。。。。。