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

Question

为了为我的表格制作一条完美的间隔虚线，我一直在努力使用 CSS 几个小时。我试过边框属性，创建一个图像并将其作为背景，在 Y 轴上重复它，以及其他一些东西(甚至在 CSS3 中)，但我的情况比我通过搜索发现的情况更具体Google:我的表中有交替的列和行类，似乎我无法用连续的边框定义整行。

我的 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; }

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

我今天的内容是:

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

Answer 1

Disclaimer: This is not a simple solution and is rather complex to understand but if you really want to produce continuous dots then this is the only approach that I can think of. I wouldn't recommend adding so much complexity for what is a small aberration with the borders but I'd leave it to you.

创建连续边框的方法是:

• 使用 radial-gradient 图像将虚线背景添加到 table 本身。由于 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>

---

如您在评论中提供的 fiddle 所示，如果所有 td 都将一些纯色作为背景(白色或其他灰色阴影)，整个事情就会变得简单得多.在这种情况下，我们不需要为 td 或其他 background-* 属性额外的 linear-gradient 背景。即使 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>