条带化html表行之间的差距

Question

条带化html表行之间的差距

我有以下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>

Run Code Online (Sandbox Code Playgroud)

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

如何删除它们？

我也有图像的例子,但我想没有他们这样做.

我尝试了Firefox 3.16.6和Chrome 10.0中的代码.

Answer 1

Nav*_*mad 5

cellspacing=0为这样的表设置:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，10 月前
查看次数：	3555 次
最近记录：	14 年，10 月前