嵌套表：1px带css边框_Css_Border_Css Tables

嵌套表：1px带css边框

css

嵌套表：1px带css边框,css,border,css-tables,Css,Border,Css Tables,我正在尝试创建一个带有1px黑色边框的表我必须在主表中嵌套一个表，并在下一个表与其封闭的相碰的地方设置“厚”边框。我只是想要一个1px的边界事实上，我有以下几点： table.outer{border:1px black solid; border-collapse: collapse;} td{border:1px black solid; border-collapse: collapse;} table.nexted{border:1px black solid; border-col

我正在尝试创建一个带有1px黑色边框的表

我必须在主表中嵌套一个表，并在下一个表与其封闭的

相碰的地方设置“厚”边框。我只是想要一个1px的边界

事实上，我有以下几点：

table.outer{border:1px black solid; border-collapse: collapse;}
td{border:1px black solid; border-collapse: collapse;}
table.nexted{border:1px black solid; border-collapse: collapse;}

只需将border属性放在

td

s上。如果你想要一个1px的边界，那就可以了；表上不需要它。

如果我理解正确，您可以使用左边框、右边框、上边框和下边框创建您想要的“特殊”案例

例如，在嵌套表中，可以设置

border-left:0;

要在嵌套表的左侧获得“结果”1 px边框，请执行以下操作。

本页介绍了如何很好地执行此操作：

发生的情况是，细胞上的边界相互碰撞，导致看起来有比实际更厚的边界。不使用border collapse属性，而是在表格本身上设置边框，仅在顶部和左侧设置边框，并在单元格的底部和右侧设置边框

为嵌套表提供无边框样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table.outer
        {
            border: 1px black solid;
            border-collapse: collapse;
            width: 100%;
        }
        table.outer td
        {
            border: 1px black solid;
            border-collapse: collapse;
        }
        table.nested, table.nested td
        {
            border-width: 0px;
            border-collapse: collapse;
            width: 100%;
        }
    </style>
</head>
<body>
    <table class="outer">
        <tr>
            <td>
                <table class="nested">
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                content
            </td>
        </tr>
        <tr>
            <td>
                content
            </td>
            <td>
                <table class="nested">
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>


表1.1外部
{
边框：1px黑色实心；
边界塌陷：塌陷；
宽度：100%；
}
表3.1外部td
{
边框：1px黑色实心；
边界塌陷：塌陷；
}
table.nested，table.nested td
{
边框宽度：0px；
边界塌陷：塌陷；
宽度：100%；
}
内容
内容