首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在表格中显示漂亮的虚线边框?-Howtodisplayagoodlookingdottedborderintable?

作者：rge4688618 | 来源：互联网 | 2023-05-17 23:21
IvebeenstrugglingwithCSSforacoupleofhoursinordertomakeaperfectspaceddottedlinefo

I've been struggling with CSS for a couple of hours in order to make a perfect spaced dotted line for my table. I've tried the border property, creating a image and put it as background, repeating it in Y axis, and some other stuff (even in CSS3), but my case is a little more specific than the ones I found out by searching in Google: I have alternated columns and rows classes in my table, and it seems that I can't define the whole row with a continuous border.

为了为我的表创建一个完美的间隔虚线，我花了几个小时与CSS做斗争。我试过边界属性,创建一个图像作为背景,在Y轴重复它,和其他一些东西(即使在CSS3),但是我的情况是一个更具体的我发现通过搜索在谷歌:我有交替行和列类在我的桌子,我似乎不能定义整个行用一个连续的边界。

My CSS:

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

I've tried also to change the "border-bottom" ones to a background-image with dots and spaces, as I mentioned before.

就像我之前提到的，我也尝试过把“边底”改成带有点和空格的背景图像。

What I have today is this:

今天我要讲的是:

enter image description here

And I want the the dots to be continuous as this: . . . . . . . . . . . .

我希望这些点是连续的:……

3 个解决方案

#1

4  

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.

声明:这不是一个简单的解决方案，它是相当复杂的，但是如果你真的想要产生连续的点，那么这是我能想到的唯一方法。我不建议为边界上的一个小异常增加这么多的复杂性，但是我把它留给你们。

The approach for creating the continuous border is very simple:

创建连续边界的方法非常简单:

  • A dotted background is added to the table itself using radial-gradient images. Since table is the parent container, the dots stretch continuously in a seamless manner.
  • 使用径向梯度图像向表本身添加点背景。由于表是父容器，所以点以无缝的方式连续地拉伸。
  • The size of the background gradient in Y-axis is equivalent to height of the td + the padding on either side. This is critical to the working.
  • y轴背景梯度的大小等于td的高度+两边的填充。这对工作至关重要。
  • The position of the background in Y-axis is calculated as -1 * (background-size in Y-axis/2) - 2px.
  • 背景在y轴中的位置计算为-1 *(背景尺寸为y轴/2)- 2px。
  • The background-repeat is set to round so that it kind of always produces full dots. All these are critical to the solution.
  • 背景-重复被设置为圆形，所以它总是产生完整的点。所有这些对解决方案都至关重要。
  • Colors cannot be added to the td or the tr as solid colors because they would hide the table background and so the solution is to add them via linear-gradient (except that the color does not change). This is done because the size of gradients can be controlled whereas that of solid color cannot be.
  • 颜色不能作为纯色添加到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;
}



  

    Hello World
    Hello World
    Hello World
  

  

    Hello World!!!
    Hello World!!!
    Hello World!!!
  

  

    Hello World
    Hello World
    Hello World
  

  

    Hi There!!!
    Hi There!!!
    Hi There!!!
  







  

    Lorem Ipsum Dolor Sit Amet
    Lorem Ipsum Dolor Sit Amet
    Lorem Ipsum Dolor Sit Amet
  

  

    Lorem Ipsum Dolor
    Lorem Ipsum Dolor
    Lorem Ipsum Dolor
  

  

    Lorem Ipsum Dolor Sit
    Lorem Ipsum Dolor Sit
    Lorem Ipsum Dolor Sit
  

  

    Lorem Ipsum
    Lorem Ipsum
    Lorem Ipsum

As shown in the fiddle that you had provided in comments, the whole thing becomes a lot simpler if all the td will have some solid color as their background (either white or other shades of gray). In such cases, we don't need the extra linear-gradient backgrounds for the td or the other background-* properties. This approach would work even when the dimensions of the tr and td are not fixed.

如您在评论中提供的小提琴所示，如果所有的td都有一些纯色作为背景(白色或其他灰色)，那么整个事情就会变得简单得多。在这种情况下，我们不需要额外的线性梯度背景为td或其他背景-*属性。即使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;
}



  

    Lorem Ipsum Dolor Sit Amet
    Lorem Ipsum Dolor Sit Amet
    Lorem Ipsum
      
Dolor Sit Amet		
  

  

    Lorem Ipsum
      
Dolor
      
Sit
      
Amet		
    Lorem Ipsum Dolor Sit Amet
    Lorem Ipsum Dolor Sit Amet
  

  

    Lorem Ipsum Dolor Sit Amet
    Lorem Ipsum Dolor Sit Amet
    Lorem Ipsum Dolor Sit Amet
  

  

    Lorem
      
Ipsum
      
Dolor
      
Sit
      
Amet		
    Lorem Ipsum Dolor Sit Amet
    Lorem Ipsum Dolor Sit Amet

#2

4  

Try setting border-left : 1px solid white to separate double dots. But create the table using

. For this, it is the better way.

尝试设置边框-左:1px固体白色，以分离两个点。但是使用

创建表。对此，这是更好的办法。 

.row {
  border-bottom-style: dotted;
  border-width: 1px;
  height: 20px;
}
.columnG {
  background-color: gray;
  float: left;
  width: 50%;
  height: 20px;
}
.columnW {
  background-color: white;
  float: left;
  width: 50%;
  height: 20px;
}

  

    XXXX
  

  

    XXXX
  






  

    XXXX
  

  

    XXXX

#3

2  

Is the demo I'm using radial gradient to make the dots. You can "play" with the range control at the bottom do find the exact result.

是我用径向梯度绘制点的demo。您可以“播放”与范围控制在底部的确定结果。

$('input').on('input', function(){
  $('tr').css('background-size', $(this).val() + 'px 4px'); 
  $('#num').html($(this).val());
});
table {
  width: 400px;
  border-spacing: 0;
}
th {
  text-align: left;
}
tr {
  background: radial-gradient(circle at bottom, black 1px, transparent 1.5px) repeat-x bottom;
  background-size: 5px 4px;  
}
tr:first-child {
  font-weight: bold;
}
tr:nth-child(odd) {
  background-color: #eee;
}
td {
  padding: 5px;
  /*border-bottom:1px dotted #aaa;*/
  /*background: radial-gradient(circle at bottom, black 1px, transparent 1.5px) repeat-x bottom;
  background-size: 5px 4px;*/
}



  
    
      

        asdf
        asdf
        asdf
        asdf
      

      

        asdf
        asdf
        asdf
        asdf
      

      

        asdf
        asdf
        asdf
        asdf
      

      

        asdf
        asdf
        asdf
        asdf
      

    






background-size: 5px 4px;


推荐阅读
  • go

    Java 并发编程：深入解析 AtomicInteger 和 CAS 无锁算法

    在多线程并发环境中，普通变量的操作往往是线程不安全的。本文通过一个简单的例子，展示了如何使用 AtomicInteger 类及其核心的 CAS 无锁算法来保证线程安全。 ... [详细]
  • go

    javascript分页类支持页码格式

    javascript分页类支持页码格式
    前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]
  • go

    解决Bootstrap DataTable Ajax请求重复问题

    解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]
  • js

    网络爬虫的规范与限制

    网络爬虫的规范与限制
    本文探讨了网络爬虫引发的问题及其解决方案，重点介绍了Robots协议的作用和使用方法，旨在为网络爬虫的合理使用提供指导。 ... [详细]
  • match

    javax.mail.search.BodyTerm.matchPart()方法的使用及代码示例

    javax.mail.search.BodyTerm.matchPart()方法的使用及代码示例 ... [详细]
  • match

    VB.net 进程通信中FindWindow、FindWindowEX、SendMessage函数的理解

    VB.net 进程通信中FindWindow、FindWindowEX、SendMessage函数的理解
    目录一、代码背景二、主要工具三、函数解析1、FindWindow：2、FindWindowEx：3、SendMessage： ... [详细]
  • post

    微信公众号推送模板40036问题

    微信公众号推送模板40036问题
    返回码错误码描述说明40001invalidcredential不合法的调用凭证40002invalidgrant_type不合法的grant_type40003invalidop ... [详细]
  • include

    检查在所有可能的“？”替换中，给定的二进制字符串中是否出现子字符串“10”带 1 或 0

    检查在所有可能的“？”替换中，给定的二进制字符串中是否出现子字符串“10”带 1 或 0 ... [详细]
  • include

    开机自启动的几种方式

    开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录，这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • install

    Python 3 Scrapy 框架执行流程详解

    Python 3 Scrapy 框架执行流程详解
    本文详细介绍了如何在 Python 3 环境下安装和使用 Scrapy 框架，包括常用命令和执行流程。Scrapy 是一个强大的 Web 抓取框架，适用于数据挖掘、监控和自动化测试等多种场景。 ... [详细]
  • include

    在 QQmlPropertyMap 的派生类中无法调用槽函数或 Q_INVOKABLE 方法？

    在尝试对 QQmlPropertyMap 类进行测试驱动开发时，发现其派生类中无法正常调用槽函数或 Q_INVOKABLE 方法。这可能是由于 QQmlPropertyMap 的内部实现机制导致的，需要进一步研究以找到解决方案。 ... [详细]
  • post

    PHP微信支付退款功能实现及订单创建类代码（附带调用示例）

    【实例简介】本文详细介绍了如何在PHP中实现微信支付的退款功能，并提供了订单创建类的完整代码及调用示例。在配置过程中，需确保正确设置相关参数，特别是证书路径应根据项目实际情况进行调整。为了保证系统的安全性，存放证书的目录需要设置为可读权限。值得注意的是，普通支付操作无需证书，但在执行退款操作时必须提供证书。此外，本文还对常见的错误处理和调试技巧进行了说明，帮助开发者快速定位和解决问题。 ... [详细]
  • js

    一篇文章搞定css3 3d效果

    一篇文章搞定css3 3d效果
    css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]
  • js

    如何使用JavaScript动态设置CSS3属性值

    这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读 ... [详细]
  • range

    使用 Matplotlib 保存 Python 动态图像为视频文件的方法与技巧

    本文介绍了如何利用 `matplotlib` 库中的 `FuncAnimation` 类将 Python 中的动态图像保存为视频文件。通过详细解释 `FuncAnimation` 类的参数和方法，文章提供了多种实用技巧，帮助用户高效地生成高质量的动态图像视频。此外，还探讨了不同视频编码器的选择及其对输出文件质量的影响，为读者提供了全面的技术指导。 ... [详细]
author-avatar
rge4688618
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有