如何在表格中显示好看的虚线边框？

Question

为了为我的表格制作完美的间隔虚线，我已经在 CSS 上苦苦挣扎了几个小时。我尝试过 border 属性，创建一个图像并将其作为背景，在 Y 轴上重复它，以及其他一些东西（甚至在 CSS3 中），但我的情况比我通过搜索发现的情况更具体一些谷歌：我在表中交替了列和行类，似乎我无法用连续边框定义整行。

我的CSS：

th { height: 42px; font-weight: bold; font-size: 15px; vertical-align:bottom; padding: 8px 16px; margin-bottom: 5px; border-bottom: 2px dotted #999; }
th.odd { background-color: #e6e6e6; }
th.even { background-color: #ddd; }
td { padding: 16px; }
tr{ border-bottom: 2px dotted #999; }
tr.even { background-color: #eee; }
tr.even td.even { background-color: #e2e2e2; }
tr.odd td.even { background-color: #eaeaea; }

正如我之前提到的，我还尝试将“边框底部”更改为带有点和空格的背景图像。

我今天所拥有的是这样的：

我希望这些点是连续的，如下所示： 。。。。。。。。。。。。

Answer 1

免责声明：这不是一个简单的解决方案，理解起来相当复杂，但如果你真的想产生连续的点，那么这是我能想到的唯一方法。我不建议为边界的小偏差添加如此多的复杂性，但我会把它留给你。

创建连续边框的方法是：

• table使用图像将虚线背景添加到其本身radial-gradient。由于table是父容器，因此点以无缝方式连续拉伸。
• Y 轴上背景渐变的大小等于两侧td+的高度。padding这对工作至关重要。
• 背景在 Y 轴中的位置计算公式为 -1 *（Y 轴中的背景大小/2）- 2px。
• 设置background-repeat为round使其始终产生完整的点。所有这些对于解决方案都至关重要。
• 颜色不能添加到td或tr作为纯色，因为它们会隐藏table背景，因此解决方案是添加它们linear-gradient（除了颜色不改变）。这样做是因为渐变的大小可以控制，而纯色的大小则不能。

table { /* to produce the dots via radial gradient */
  background-image: radial-gradient(circle at 50% 50%, black 1px, transparent 2px);
  background-size: 8px 50px; /* size in y-axis is equal to td height + padding top + padding bottom */
  background-position: 2px -27px; /* position in y-axis is -1 * size/2 - 2px */
  background-repeat: round; /* makes dots repeat in round manner */
  border-collapse: collapse;
}
td {
  vertical-align: bottom;
  height: 46px; 
  padding: 2px;
}
tr:nth-child(even) {
  background-image: linear-gradient(#eee, #eee);
  background-size: 100% 46px; /* size in y-axis is height of td */
  background-repeat: no-repeat;
}
tr:nth-child(even) td:nth-child(even) {
  background-image: linear-gradient(#e2e2e2, #e2e2e2);
  background-size: 100% 46px;
  background-repeat: no-repeat;
}
tr:nth-child(odd) td:nth-child(even) {
  background-image: linear-gradient(#eaeaea, #eaeaea);
  background-size: 100% 46px;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  </tr>
  <tr>
    <td>Hello World!!!</td>
    <td>Hello World!!!</td>
    <td>Hello World!!!</td>
  </tr>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  </tr>
  <tr>
    <td>Hi There!!!</td>
    <td>Hi There!!!</td>
    <td>Hi There!!!</td>
  </tr>
</table>
<br/>
<table>
  <tr>
    <td>Lorem Ipsum Dolor Sit Amet</td>
    <td>Lorem Ipsum Dolor Sit Amet</td>
    <td>Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr>
    <td>Lorem Ipsum Dolor</td>
    <td>Lorem Ipsum Dolor</td>
    <td>Lorem Ipsum Dolor</td>
  </tr>
  <tr>
    <td>Lorem Ipsum Dolor Sit</td>
    <td>Lorem Ipsum Dolor Sit</td>
    <td>Lorem Ipsum Dolor Sit</td>
  </tr>
  <tr>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
</table>

正如您在评论中提供的小提琴所示，如果所有的td背景都具有某种纯色（白色或其他灰色阴影），那么整个事情就会变得简单得多。在这种情况下，我们不需要linear-gradient该属性td或其他background-*属性的额外背景。tr即使和的尺寸td不固定，这种方法也可以工作。

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 12px;
  font-family: Arial;
  color: #333;
  font-size: 13px;
  background-image: radial-gradient(circle at 50% 50%, #999 1px, transparent 1px);
  background-size: 4px 2px;
  background-repeat: round;
}
td {
  padding: 16px;
  border-bottom: 2px solid transparent;
}
tr.odd td.odd {
  background: #fff padding-box;  /* the padding-box property is to prevent the background from being present under the 2px transparent border area */
}
tr.even td.odd {
  background: #eee padding-box;
}
tr.even td.even {
  background: #e2e2e2 padding-box;
}
tr.odd td.even {
  background: #eaeaea padding-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
  <tr class="odd">
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum
      <br>Dolor Sit Amet</td>
  </tr>
  <tr class="even">
    <td class="odd">Lorem Ipsum
      <br>Dolor
      <br>Sit
      <br>Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr class="odd">
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr class="even">
    <td class="odd">Lorem
      <br>Ipsum
      <br>Dolor
      <br>Sit
      <br>Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
</table>