1

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

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

但我不想用一条线分隔第 1 列和第 2 列，或第 3 列和第 4 列等。

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

任何帮助将不胜感激。

4

3 回答 3

1

你可以使用

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

只会选择每隔一个 td 并将它们添加到边框

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

于 2010-05-22T16:45:42.280 回答
0

我认为你的实线问题是桌子上的'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>
于 2010-05-20T13:51:10.087 回答
0

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

于 2013-11-14T19:42:25.323 回答