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

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

作者：mobiledu2502872825 | 来源：互联网 | 2023-06-02 10:19
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;


推荐阅读
  • less

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • range

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • tree

    推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标

    推荐系统遇上深度学习(十七）详解推荐系统中的常用评测指标
    原创：石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人，希望在平日的工作学习中，挖掘数据的价值， ... [详细]
  • replace

    MooTools和JQuery并排 - MooTools and JQuery Side by Side

    IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • require

    从零基础到精通的前台学习路线

    从零基础到精通的前台学习路线
    随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]
  • require

    Hive常用命令及其用途

    本文介绍了Hive常用命令及其用途，包括列出数据表、显示表字段信息、进入数据库、执行select操作、导出数据到csv文件等。同时还涉及了在AndroidManifest.xml中获取meta-data的value值的方法。 ... [详细]
  • cookie

    提升Python编程效率的十点建议

    提升Python编程效率的十点建议
    本文介绍了提升Python编程效率的十点建议，包括不使用分号、选择合适的代码编辑器、遵循Python代码规范等。这些建议可以帮助开发者节省时间，提高编程效率。同时，还提供了相关参考链接供读者深入学习。 ... [详细]
  • cookie

    PHP图片截取方法及应用实例

    PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法，并提供了应用实例，包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用，以及图片切割的具体步骤。同时，还提供了一些注意事项和优化建议。通过本文的学习，读者可以掌握PHP图片截取的技巧，实现自己的需求。 ... [详细]
  • stream

    大量研发 销售 产品 设计 市场 岗位！

    关于我们EMQ是一家全球领先的开源物联网基础设施软件供应商，服务新产业周期的IoT&5G、边缘计算与云计算市场，交付全球领先的开源物联网消息服务器和流处理数据 ... [详细]
  • include

    P1651 塔 (动态规划) 的最大高度计算方法

    本文介绍了P1651题目的描述和要求，以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术，将问题转化为求解差值的问题，并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]
  • require

    javaweb多图片打包下载，弹出提示框问题_html/css_WEBITnose

    在springmvc框架中，前台ajax调用方法，对图片批量下载，如何弹出提示保存位置选框？Controller方法 ... [详细]
  • require

    前端人员必须知道的三个问题及其发展阶段

    本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]
  • include

    如何在codeigniter中识别angularjs请求

    本文讨论了如何在codeigniter中识别来自angularjs的请求，并提供了两种方法的代码示例。作者尝试了$this->input->is_ajax_request()和自定义函数is_ajax()，但都没有成功。最后，作者展示了一个ajax请求的示例代码。 ... [详细]
  • include

    Java后台Jsonp处理方法及其应用场景

    本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议，它允许在服务器端通过Script tags返回至客户端，并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法，它是一种面向数据结构的分析和设计方法，以活动为中心，将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码，使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • process

    DataTables插件介绍及使用方法

    本文介绍了DataTables插件的官方网站以及其基本特点和使用方法，包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性，以及国际化和动态创建表格的功能。此外，还提供了参数初始化和延迟加载的示例代码。 ... [详细]
author-avatar
mobiledu2502872825
这个家伙很懒，什么也没留下！
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社区 版权所有