table表格多层嵌套table采坑！（重复描边兼容问题）

最新推荐文章于 2025-06-17 18:12:50 发布

夕空

最新推荐文章于 2025-06-17 18:12:50 发布

阅读量1.6w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： html 文章标签： table 嵌套表格 table表格表格边线 table描边

本文链接：https://blog.youkuaiyun.com/zhi_jie/article/details/80698828

html 专栏收录该内容

8 篇文章

订阅专栏

你肯定会说table还要解决兼容问题，你搞笑啊~~
是的，一开始我也会这样说，但那是在只有一个table状况下，咋折腾都没问题，直到有一天。。。
先说说为什么要嵌套table，常规情况下我们用一个table就能解决问题，拆分及合并单元格可以用到rowspan和colspan，但是搞起来真的好麻烦啊！！！复杂的表格拆结构真的吐血。比如：完美的细线表格
为了制作一个这种表格不得已大表格套小表格（或许有更方便的软件？）

最初做完后：：：
失败的嵌套表格
卧槽，出现重复描边，这可不是我们想要的结果。
然后在网上查了下，写了最初的表格样式：

table {
    font-size:16px;
    border-collapse: collapse;
}
table td,table th {
    border-width: 1px;
    border-style: solid;
    border-color: #333;
    background-color: #ffffff;
    padding:12px 10px;
}

/*在子table表格外层的td写border样式名*/
.border0{
    padding:0;
}
.border0 table{
    border-style:hidden;
    border-width:0;
}

本想大功告成，好开森，但ie的F12里切换ie版本发现。。。ie6/7/8还是那样！
网上找了好久解决方案也没找到，肯能太冷门吧，最终，我想到让表格td右边与底边1px，左与上0px的IE hack

table {
    *border-style: solid;
    *border-color: #333;
    *border-width: 1px 0 0 1px;
    font-size:16px;
    border-collapse: collapse;
}
table td,table th {
    border-width: 1px;
    *border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #333;
    background-color: #ffffff;
    padding:12px 10px;
    box-sizing: border-box;
}

/*在子table表格外层的td写border样式名*/
.border0{
    padding:0;
    *border-width: 0;
}
.border0 table{
    margin-left: -1px;
    margin-left: 0\9;
    border-style:hidden;
    *border-style:solid;
    border-width:0;
}

此方法确实决绝了ie6/7的问题（稍有差异），但发现ie8这个老大难不行啊，没有针对ie8的hack，头大，最终不得已在页面头部做了降级处理（未测试ie8浏览器，F12里切ie8无法看结果）

<!--[if IE 8]> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <![endif]-->

好了，把最终的完整页面代码贴出来，有更完美的方案时望指正（会不会有人说我用某某软件画多复杂的表格都OK，折腾啥？- -！）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if IE 8]> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <![endif]-->
    <title>无标题文档</title>
    <style type="text/css">

        html{height:100%;font-size : 13px;}
        body{
            font-family:"宋体"; line-height:24px; color: #333; background:#FFF;
            width:100%;height:100%; margin:0; padding:0;
        }
        th,td{margin:0;padding:0;}


        table {
            *border-style: solid;
            *border-color: #333;
            *border-width: 1px 0 0 1px;
            font-size:16px;
            border-collapse: collapse;
        }
        table td,table th {
            border-width: 1px;
            *border-width: 0 1px 1px 0;
            border-style: solid;
            border-color: #333;
            background-color: #ffffff;
            padding:12px 10px;
            box-sizing: border-box;
            text-align:justify;text-justify:inter-ideograph;
        }
        table th {
            background-color: #dedede;text-align: center;
        }
        .border0{
            padding:0;
            *border-width: 0;
        }
        .border0 table{
            margin-left: -1px;
            margin-left: 0\9;
            border-style:hidden;
            *border-style:solid;
            border-width:0;
        }

        .jusall{text-align-last:justify;}
        .textcenter{text-align:center}
        .textright{text-align:right}

    </style>
</head>

<body>
    <h1 style="text-align:center;padding:60px 0 10px;">道路运输驾驶员诚信考核表</h1>
    <table width="960" align="center">
        <tr>
            <td colspan="2" class="textcenter">以下由驾驶员填写</td>
        </tr>
        <tr>
            <td colspan="2" class="border0">
                <table width="100%">
                    <tr>
                        <td width="150" class="textcenter">姓名</td>
                        <td class="border0">
                            <table width="100%">
                                <tr>
                                    <td width="300">&nbsp;</td>
                                    <td width="100">性别</td>
                                    <td>男 □&nbsp;&nbsp;&nbsp;女 □</td>
                                </tr>
                            </table>
                        </td>
                        <td width="120" rowspan="4" class="textcenter">照片</td>
                    </tr>
                    <tr>
                        <td class="textcenter">身份证号</td>
                        <td class="border0">
                            <table width="100%">
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td>&nbsp;</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="textcenter">住址</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="textcenter">联系电话</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td width="150" class="textcenter">从业资格证号</td>
            <td class="border0">
                <table width="100%">
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="textcenter">服务单位</td>
            <td>道路旅客运输 □&nbsp;&nbsp;&nbsp;道路货物运输 □&nbsp;&nbsp;&nbsp;道路危险货物运输 □&nbsp;&nbsp;&nbsp;</td>
        </tr>
    </table>
</body>
</html>