黑马程序员技术交流社区

标题: 关于表格css的问题 [打印本页]

---

作者: 吴伟烈    时间: 2012-6-17 10:15
标题: 关于表格css的问题
我在一个表格tb1中内嵌一个小表格tb2
为表格写了个css
#tb1 td
{
border: 1px solid blue;
}

但是执行的时候tb2的边框被改变了，有没有什么好办法解决
难道要为tb2也写一个css吗
大家帮帮忙

---

作者: 张恒维    时间: 2012-6-17 14:56
这个表示tb1里面所有td都会是这个样式，tb2被包含在tb1里面，那tb2的td也自然算在内了。如果当前元素没有样式的话，便会继承父级元素的样式。

---

作者: 吴伟烈    时间: 2012-6-17 22:50
嗯，但是应该怎么解决呢

---

作者: 张恒维    时间: 2012-6-17 23:34
你可以重新给tb2的td定义样式，CSS样式是就近原则，哪一个近就取哪一个样式，因此你也可以直接在td内写行内样式。

---

作者: 许庭洲    时间: 2012-6-18 08:37


这个问题属于CSS表格嵌套技术，举个例子如下：

CSS处理表格嵌套代码：
<style type="text/css">
    .form-table{
        border-collapse:collapse;
        border-spacing:0px;
        border-style:solid solid solid solid;
        border-width:1px;
        border-color:000000;
    }
    .form-table table{
        border-collapse:collapse;
        border-spacing:0px;
    }
    .form-table td{
        margin:0px;
        padding:0px;
        height:25px;
        line-height:25px;
        text-align:center;
        border-style:solid none none solid;
        border-width:1px;
        border-color:000000;
    }
    .form-table table tr:first-child td{
        border-top-style:none;
    }
    .form-table table tr td:first-child{
        border-left-style:none;
    }
    </style>
表格引用CSS的代码：
    <table width="50%" class="form-table" style="background:CFF;">
        <tr>
            <td>
                <table width="100%" style="background:FFC;">
                    <tr>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td> </td>
                    </tr>
                </table>
            </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td>
                <table width="100%" style="background:CF9;">
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td>
                            <table width="100%" style="background:FFC;">
                                <tr>
                                    <td> </td>
                                    <td> </td>
                                </tr>
                                <tr>
                                    <td> </td>
                                    <td> </td>
                                </tr>
                            </table>
                        </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                </table>
            </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
            <td>
                <table width="100%" style="background:FFC;">
                    <tr>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td> </td>
                        <td> </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2