Question

我有以下html文件：

<html>
<head>
    <style type="text/css">
        .table-striped {
            padding: 0;
            margin: 0;
            border: 0 none;
        }
        .table-striped td {
            border-bottom-style: dotted;
            border-width: 0 0 1px 0;
            border-color: #999999;
            padding: 0;
            margin: 0;
        }
        .table-striped tr {
            padding: 0;
            margin: 0;
            border-width: 0;
        }

        .table-striped tr:nth-child(even) {
            background-color: #CCCCCC;
        }
        .table-striped tr:nth-child(odd) {
            background-color: #ECECEC;
        }
    </style>
</head>

<body>
    <table class="table-striped">
        <tr><td>Line 1</td></tr>
        <tr><td>Line 2</td></tr>
        <tr><td>Line 3</td></tr>
        <tr><td>Line 4</td></tr>
    </table>
</body>
</html>

尽管我将填充和边距设置为0，但在虚线边框和下一个单元格背景下仍有白色细线。

如何删除它们？

我也有图像的例子，但我想在没有图像的情况下这样做。

我在Firefox 3.16.6和Chrome 10.0中尝试了代码。

Answer 1

为此表设置cellspacing=0：

<table class="table-striped" cellspacing="0">

Answer 2

.table-striped {
    padding: 0;
    margin: 0;
    border: 0 none;
    border-collapse:collapse;
}

条带化html表行之间的差距

2 个答案: