html – 如何在表格中显示漂亮的虚线边框？

概述我一直在努力使用CSS几个小时才能为我的桌子制作一个完美的间距虚线.我已经尝试过border属性,创建一个图像并将其作为背景,在Y轴上重复它,以及其他一些东西(甚至在 CSS3中),但我的情况比我通过搜索找到的更具体一些.谷歌：我在表格中交替使用了列和行类,似乎我无法用连续的边界定义整行. 我的CSS： th { height: 42px; font-weight: bold; font-size 我一直在努力使用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; }

我也试过将“边框底部”更改为带点和空格的背景图像,正如我之前提到的那样.

我今天拥有的是：

而且我希望这些点是连续的：. . . . . . . . . . . .

解决方法

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.

创建连续边框的方法非常简单：

>使用径向渐变图像将虚线背景添加到表格本身.由于table是父容器,因此点以无缝方式连续伸展.
> Y轴上背景渐变的大小等于两侧填充的td的高度.这对工作至关重要.
>背景在Y轴上的位置计算为-1 *(Y轴/ 2中的背景大小) – 2px.
> background-repeat设置为round,以便总是产生完整的点.所有这些对解决方案至关重要.
>颜色不能作为纯色添加到td或tr中,因为它们会隐藏表背景,因此解决方案是通过线性渐变添加它们(除了颜色不会改变).这样做是因为可以控制渐变的大小,而不能控制纯色的大小.

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都有一些纯色作为背景(白色或其他灰色阴影),则整个过程变得更加简单.在这种情况下,我们不需要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 >    <td >Lorem Ipsum Dolor Sit Amet</td>    <td >Lorem Ipsum Dolor Sit Amet</td>    <td >Lorem Ipsum      <br>Dolor Sit Amet</td>  </tr>  <tr >    <td >Lorem Ipsum      <br>Dolor      <br>Sit      <br>Amet</td>    <td >Lorem Ipsum Dolor Sit Amet</td>    <td >Lorem Ipsum Dolor Sit Amet</td>  </tr>  <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      <br>Ipsum      <br>Dolor      <br>Sit      <br>Amet</td>    <td >Lorem Ipsum Dolor Sit Amet</td>    <td >Lorem Ipsum Dolor Sit Amet</td>  </tr></table>

总结

以上是内存溢出为你收集整理的html – 如何在表格中显示漂亮的虚线边框？全部内容，希望文章能够帮你解决html – 如何在表格中显示漂亮的虚线边框？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。