嵌套表格：1px 边框与 css答案

【问题标题】：Nested tables: 1px border with css嵌套表格：1px 边框与 css
【发布时间】：2016-09-29 23:55:59
【问题描述】：

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

我必须在主表中嵌套一个表，并在下一个表与其封闭的<td> 对接的地方获得“粗”边框。我只想要一个 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;}

【问题讨论】：

标签： css border css-tables

【解决方案1】：

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

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

border-left:0;

在嵌套表格的左侧获得一个“生成的”1 px 边框。

【讨论】：

【解决方案2】：

为您的嵌套表格提供无边框样式

<!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>

【讨论】：

【解决方案3】：

只需将边框属性放在tds 上即可。如果你想要一个 1px 的边框，那就可以了；你不需要它在桌子上。

【讨论】：

【解决方案4】：

这个页面描述了如何做得很好：http://www.visakopu.net/misc/table-border-css/

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

【讨论】：