博客列表 >深夜一男子制作表格,发现css中隐藏的惊天秘密2019年9月9日2点

深夜一男子制作表格,发现css中隐藏的惊天秘密2019年9月9日2点

月迎下弦的博客
月迎下弦的博客原创
2019年09月09日 04:03:26916浏览

总结:对于使用css来制作一个圆角的表格出现的问题和解决方式。

ⅰ,当表格不加载背景图片时,

当设置表格行和列的边框时候会出现如下图所示的情况:(只设置了行和列的边框)

未标题-3.jpg


如图可以看出在边框底部和平的行里面左右的两个边角的圆角和上面的是不一样的。

分别设置了table的四个边框:

未标题-5.jpg


解决办法是取消底边的tfoot的边框,改为设置table的边框可以解决如下图:

未标题-4.jpg



 

如果在表格的最后一行不是合并的表格时,则可以按照直接设置table的圆角或者分别设置四个边框的圆角来实现如下图:

未标题-6.jpg

其中的每行和每列的边框则可以分别进行设置如下图:

未标题-8.jpg


ⅱ,table加载背景图片:

当加载的背景图片背景色和页面是同样的颜色,那么加载后的背景图片就会显示

出四个圆角的带有背景图片的表格如下图:

未标题-7.jpg

当家在的图片背景色和页面不一致时候,就不能在设置table的边框了,否则显示的就是图片的直角,如下图

未标题-9.jpg

所以解决办法就是取消table的边框,并且在表格每个行和列上分别添加边框(四周的边框不能添加)如下图:

10.jpg

通过设置边框的圆角发现制作出圆角的表格有很多中方法,多次的尝试,发现灵活的运用各种功能的代码能更加快速的实现目标。

table {
    /* border-collapse: collapse; */
    border-collapse: separate;
    width: 800px;
    height: 500px;
    margin: 0 auto;
    /* box-shadow: 7px 6px 5px #888; */
    position: relative;
    border-spacing: 0;
    /* border: 1px solid red; */
    border-radius: 10%;
}
table tfoot {
    /* 调整文本字体间距 */
    letter-spacing: 15px;
}
table::before {
    content: '';
    width: 800px;
    height: 500px;
    position: absolute;
    left: 0;
    right: 30px;
    top: 142px;
    background-image: url("../img/111.jpg");
    background-size:800px 500px;
    /* 设置图片的固定尺寸 */
    opacity: 0.2;
    /* ackground-size: cover; */
    /*设置图片按照比例缩放*/
}

 border-collapse: collapse; 由于不支持border的radious属性所以使用

border-collapse: separate:

分隔(separated)模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 border-spacing 来确定的。

border-spacing 属性指定相邻单元格边框之间的距离(只适用于 边框分离模式 )。相当于 HTML 中的 cellspacing 属性,但是第二个可选的值可以用来设置不同于水平间距的垂直间距。border-spacing 值也适用于表格的外层边框上,即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的(水平的或垂直的) 边框间距(border-spacing)和相应的(上,右,下或左)内边距之和。该属性只适用于 border-collapse 值是 separate 的时候。


 

 

 

 

 

 


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
月迎下弦2019-09-09 13:06:112楼
嗯 标题党也很重要!
木槿昔年2019-09-09 10:21:411楼
你的标题成功吸引到了我