table表格多层嵌套table采坑!(重复描边兼容问题)

你肯定会说table还要解决兼容问题,你搞笑啊~~
是的,一开始我也会这样说,但那是在只有一个table状况下,咋折腾都没问题,直到有一天。。。
先说说为什么要嵌套table,常规情况下我们用一个table就能解决问题,拆分及合并单元格可以用到rowspan和colspan,但是搞起来真的好麻烦啊!!!复杂的表格拆结构真的吐血。比如:table表格多层嵌套table采坑!(重复描边兼容问题)_第1张图片
为了制作一个这种表格不得已大表格套小表格(或许有更方便的软件?)

最初做完后:::
table表格多层嵌套table采坑!(重复描边兼容问题)_第2张图片
卧槽,出现重复描边,这可不是我们想要的结果。
然后在网上查了下, 写了最初的表格样式:

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无法看结果)

好了,把最终的完整页面代码贴出来,有更完美的方案时望指正(会不会有人说我用某某软件画多复杂的表格都OK,折腾啥?- -!):


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <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"> td>
                                    <td width="100">性别td>
                                    <td>男 □   女 □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> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                    <td> td>
                                tr>
                            table>
                        td>
                    tr>
                    <tr>
                        <td class="textcenter">住址td>
                        <td> td>
                    tr>
                    <tr>
                        <td class="textcenter">联系电话td>
                        <td> td>
                    tr>
                table>
            td>
        tr>
        <tr>
            <td width="150" class="textcenter">从业资格证号td>
            <td class="border0">
                <table width="100%">
                    <tr>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                        <td> td>
                    tr>
                table>
            td>
        tr>
        <tr>
            <td class="textcenter">服务单位td>
            <td>道路旅客运输 □   道路货物运输 □   道路危险货物运输 □   td>
        tr>
    table>
body>
html>

你可能感兴趣的:(html,table,嵌套表格,table表格,表格边线,table描边)