A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 吴伟烈 中级黑马   /  2012-6-17 10:15  /  1925 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

我在一个表格tb1中内嵌一个小表格tb2
为表格写了个css
#tb1 td
{
border: 1px solid blue;
}

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

评分

参与人数 1技术分 +1 收起 理由
宋天琪 + 1

查看全部评分

4 个回复

倒序浏览
这个表示tb1里面所有td都会是这个样式,tb2被包含在tb1里面,那tb2的td也自然算在内了。如果当前元素没有样式的话,便会继承父级元素的样式。

评分

参与人数 1技术分 +1 收起 理由
宋天琪 + 1

查看全部评分

回复 使用道具 举报
嗯,但是应该怎么解决呢
回复 使用道具 举报
你可以重新给tb2的td定义样式,CSS样式是就近原则,哪一个近就取哪一个样式,因此你也可以直接在td内写行内样式。

评分

参与人数 1技术分 +1 收起 理由
宋天琪 + 1

查看全部评分

回复 使用道具 举报
本帖最后由 许庭洲 于 2012-6-18 08:44 编辑

这个问题属于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>

评分

参与人数 2技术分 +1 黑马币 +2 收起 理由
宋天琪 + 1
吴伟烈 + 2 赞一个!

查看全部评分

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马