嵌套表格：1px 边框，带 css

发布于 2024-07-25 17:51:06 字数 339 浏览 2 评论 0原文

我正在尝试创建一个带有 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;}

原文

I'm trying to create a table with a 1px black border.

I have to nest a table in the main table, and get "thick" borders where the next table butts against its enclosing <td>. I just want a 1px border everywhere.

I have this, in effect:

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;}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

_畞蕅 2024-08-01 17:51:06

如果我理解正确的话，您可以使用 border-left、border-right、border-top 和 border-bottom 来创建您想要的这些“特殊”情况。

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

border-left:0;

在嵌套表格的左侧获得“结果”1 px 边框。

If I understand you correctly, you can use border-left, border-right, border-top and border-bottom to create these "special" cases you want.

For instance, in your nested tables you can set

border-left:0;

to get a "resulting" 1 px border in the left side of the nested table.

回复收藏 0 原文

撩动你心 2024-08-01 17:51:06

没有为嵌套表格提供边框样式

<!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>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                    <tr>
                        <td>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                content
            </td>
        </tr>
        <tr>
            <td>
                content
            </td>
            <td>
                <table class="nested">
                    <tr>
                        <td>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                    <tr>
                        <td>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

give no border style for your nested table

<!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>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                    <tr>
                        <td>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                content
            </td>
        </tr>
        <tr>
            <td>
                content
            </td>
            <td>
                <table class="nested">
                    <tr>
                        <td>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                    <tr>
                        <td>
                             
                        </td>
                        <td>
                             
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

回复收藏 0 原文