由于 td 的 colspan导致的问题
2006-09-23 17:33 晓风残月 阅读(2644) 评论(0) 编辑 收藏 举报
请大家帮忙看看这段HTML，这是从GridView生成的HTML摘出来的，我用了PagerTemplate, 由于pager那一个的td 合并了其他列设置了 colspan，而且这个pager内容比较多，比较宽，导致了第一列
<td style="width:20px;">
<span title="全选"><input id="grdvRole_ctl01_chkAll" type="checkbox" name="grdvRole$ctl01$chkAll" onclick="onChkAll(this, 'chkItem');" /></span>全选
</td>
占据了不只 20px，但是实际上还是20px，因为“全选”两个字已经换行了。
我已经手动建了一个table，然后也是让合并列的内容宽于非合并列的宽度，同样会导致如此的问题。
HTML：(省略了ItemTemplate 的内容）
<table cellspacing="0" rules="all" border="1" id="grdvRole" style="width:100%;">
<tr>
<td style="width:20px;">
<span title="全选"><input id="grdvRole_ctl01_chkAll" type="checkbox" name="grdvRole$ctl01$chkAll" onclick="onChkAll(this, 'chkItem');" /></span>全选
</td><td>名称</td><td>
<a id="grdvRole_ctl01_btnDelete" href="javascript:__doPostBack('grdvRole$ctl01$btnDelete','')">删除</a>
</td>
</tr>
<tr>
<td colspan="3">
<span id="grdvRole_ctl13_lblPageIndex" title="当前页数" class="pager-lbl">第1/</span>
<span id="grdvRole_ctl13_lblPageCount" title="所有页数" class="pager-lbl">2页</span>
<span id="grdvRole_ctl13_lblPageSize" title="每页项数" class="pager-lbl">每页10项</span>
<span id="grdvRole_ctl13_lblItemCount" title="所有项数" class="pager-lbl">共14项</span>
<a id="grdvRole_ctl13_btnFirst" title="首页" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnFirst','')">首页</a>
<a id="grdvRole_ctl13_btnPrev" title="上一页" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnPrev','')">上一页</a>
<a id="grdvRole_ctl13_btnNext" title="下一页" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnNext','')">下一页</a>
<a id="grdvRole_ctl13_btnLast" title="尾页" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnLast','')">尾页</a>
<input name="grdvRole$ctl13$txtNewPageIndex" type="text" value="1" id="grdvRole_ctl13_txtNewPageIndex" title="请输入页码" class="pager-txt" style="width:20px;" />
<a id="grdvRole_ctl13_btnGo" title="跳到" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnGo','')">GO</a>
</td>
</tr>
</table>
IE浏览的效果：
FF的效果确实争正确的：
<td style="width:20px;"> <span title="全选"><input id="grdvRole_ctl01_chkAll" type="checkbox" name="grdvRole$ctl01$chkAll" onclick="onChkAll(this, 'chkItem');" /></span>全选 </td>我已经手动建了一个table，然后也是让合并列的内容宽于非合并列的宽度，同样会导致如此的问题。
HTML：(省略了ItemTemplate 的内容）
<table cellspacing="0" rules="all" border="1" id="grdvRole" style="width:100%;"> <tr> <td style="width:20px;"> <span title="全选"><input id="grdvRole_ctl01_chkAll" type="checkbox" name="grdvRole$ctl01$chkAll" onclick="onChkAll(this, 'chkItem');" /></span>全选 </td><td>名称</td><td> <a id="grdvRole_ctl01_btnDelete" href="javascript:__doPostBack('grdvRole$ctl01$btnDelete','')">删除</a> </td> </tr> <tr> <td colspan="3"> <span id="grdvRole_ctl13_lblPageIndex" title="当前页数" class="pager-lbl">第1/</span> <span id="grdvRole_ctl13_lblPageCount" title="所有页数" class="pager-lbl">2页</span> <span id="grdvRole_ctl13_lblPageSize" title="每页项数" class="pager-lbl">每页10项</span> <span id="grdvRole_ctl13_lblItemCount" title="所有项数" class="pager-lbl">共14项</span> <a id="grdvRole_ctl13_btnFirst" title="首页" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnFirst','')">首页</a> <a id="grdvRole_ctl13_btnPrev" title="上一页" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnPrev','')">上一页</a> <a id="grdvRole_ctl13_btnNext" title="下一页" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnNext','')">下一页</a> <a id="grdvRole_ctl13_btnLast" title="尾页" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnLast','')">尾页</a> <input name="grdvRole$ctl13$txtNewPageIndex" type="text" value="1" id="grdvRole_ctl13_txtNewPageIndex" title="请输入页码" class="pager-txt" style="width:20px;" /> <a id="grdvRole_ctl13_btnGo" title="跳到" class="pager-lnk" href="javascript:__doPostBack('grdvRole$ctl13$btnGo','')">GO</a> </td> </tr> </table>IE浏览的效果：
FF的效果确实争正确的：
