Question

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

Answer 1

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

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

border-left:0;

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

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

Answer 3

只需将border属性放在td上即可。如果你想要一个1px的边界，那就行了;你不需要在桌子上。

Answer 4

此页面介绍了如何做得很好：http://www.visakopu.net/misc/table-border-css/

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

嵌套表：1px与css的边界

4 个答案: