热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

table设置colspan属性,列宽显示错位解决方法

<table><tr>
<table border="1" style="width:100%;border-collapse:collapse;">
            <tr>
                <td width="100px" rowspan="3">titletd>
                <td colspan="4">name1td>
                <td colspan="23">name2td>
                <td colspan="8">name3td>
                <td colspan="8">name4td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td colspan="4">name1td>
                <td colspan="23">name2td>
                <td colspan="8">name3td>
                <td colspan="8">name4td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td colspan="2" >0td>
                <td colspan="2" >1td>
                <td colspan="2" >2td>
                <td colspan="2" >3td>
                <td colspan="2" >4td>
                <td colspan="2" >5td>
                <td colspan="2" >6td>
                <td colspan="2" >7td>
                <td colspan="2" >8td>
                <td colspan="2" >9td>
                <td colspan="2" >10td>
                <td colspan="2" >11td>
                <td colspan="2" >0td>
                <td colspan="2" >1td>
                <td colspan="2" >2td>
                <td colspan="2" >3td>
                <td colspan="2" >4td>
                <td colspan="2" >5td>
                <td colspan="2" >6td>
                <td colspan="2" >7td>
                <td colspan="2" >8td>
                <td colspan="2" >9td>
                <td colspan="2" >10td>
                <td colspan="2" >11td>
            tr>
        table>

在chrome 62中显示效果正常(name3宽度 == name4宽度),如图:

 

在firefox 57.2中显示异常,name4(占4格)和name3(占3.5格)列宽不一致,如图

 

 解决方法,给table添加'table-layout=fixed'属性

<table border="1" style="table-layout:fixed;width:100%;border-collapse:collapse;">
            <tr>
                <td width="100px" rowspan="3">titletd>
                <td colspan="4">name1td>
                <td colspan="23">name2td>
                <td colspan="8">name3td>
                <td colspan="8">name4td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td colspan="4">name1td>
                <td colspan="23">name2td>
                <td colspan="8">name3td>
                <td colspan="8">name4td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
                <td>td>
            tr>
            <tr>
                <td colspan="2" >0td>
                <td colspan="2" >1td>
                <td colspan="2" >2td>
                <td colspan="2" >3td>
                <td colspan="2" >4td>
                <td colspan="2" >5td>
                <td colspan="2" >6td>
                <td colspan="2" >7td>
                <td colspan="2" >8td>
                <td colspan="2" >9td>
                <td colspan="2" >10td>
                <td colspan="2" >11td>
                <td colspan="2" >0td>
                <td colspan="2" >1td>
                <td colspan="2" >2td>
                <td colspan="2" >3td>
                <td colspan="2" >4td>
                <td colspan="2" >5td>
                <td colspan="2" >6td>
                <td colspan="2" >7td>
                <td colspan="2" >8td>
                <td colspan="2" >9td>
                <td colspan="2" >10td>
                <td colspan="2" >11td>
            tr>
        table>

 

 chrome和firefox显示效果相同

 


推荐阅读
author-avatar
28划生12_928
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有