Question

我创建了一个包含20行和10列的表。我想创建一个分隔每两列的网格线。

因此，在第2列和第3列之间会有一条分隔它们的线。还应该有分隔第4列和第5列，第6列和第7列以及第8列和第9列的行。

但我不希望有一行分隔第1列和第2列，或第3列和第4列等。

有没有办法用CSS做到这一点？我已经尝试在列的每个单独的单元格上创建一个左边框，但是它没有给我一条沿着列的实线。

非常感谢任何帮助。

Answer 1

您可以使用

td:nth-child(2n){
  border-right: 1px solid #000
}

只会选择所有其他td并添加边框

这是最干净的方法，因为它不需要任何无关的标记。但并非每个浏览器都会处理它:(

Answer 2

我认为你的实线问题是桌面上的'border-collapse'属性。如果你没有设置'border-collapse：collapse'，你的表格单元格之间会有一些空格。

以下是该表的示例，第2列和第3列，第4列和第5列之间的边框等：

<html>
<head>
<style type="text/css">
    table {
        border-collapse:collapse;
        border:1px solid black;
    }

    td {
        padding:2px 8px;
    }

    .border {
        border-right:1px solid black;
    }
</style>
</head>
<body>
<table>
<tr>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
</tr>
<tr>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
    <td>asdf</td><td class="border">asdf</td>
</tr>
</body>
<html>

Answer 3

使用CSS可以获得相同的效果，请检查一下 http://www.w3.org/Style/Examples/007/evenodd

用于交替列的CSS网格线

3 个答案: