css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么?
border-collapse属性设置表格边框线的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们来了解一下cssborder-collapse属性是什么?它的作用。
border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示。
border-collapse属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:
--separate默认值:边框会被分开,不会忽略border-spacing和empty-cells属性;
--collapse:如果可能,边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性;
--inherit:规定应该从父元素继承border-collapse属性的值。
双线表格边框的实现
html代码:
css代码:
table,table td{
text-align: center;
border: 1px solid #000;
border-collapse:separate;
}
table td{
padding: 10px 30px;
}
效果图:
表格边框的双线样式其实很简单,只要同时设置表格外边框和table里的每个单元格的边框,就可以实现了。
因为separate是默认值,就算是不设置border-collapse:separate;表格也会呈现双线效果。
我们主要是来看看border-collapse属性合并边框,实现单线边框的方法,html代码一样,只需设置css样式:
css代码:
table,table tr td {
border: 1px solid #000;
text-align: center;
border-collapse: collapse;
}
table tr td {
padding: 10px 30px;
}
单线边框的实现也很简单,它是在双线样式的基础上,设置border-collapse: collapse;
把相邻的两个table边框合并成一个,使得相邻的两条线并在一起,边框就以单线的形式显示了。
总结:表格边框的无论是单线边框样式,还是双线边框样式都在前端页面中应用广泛,大家可以根据自己
原来css中的border还可以这样玩
原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
css中的border还可以这样玩
在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...
CSS中具有继承性的属性:
CSS中具有继承性的属性: color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...
css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
关于css中的border
我一直以为css中的border是正方形的 像这样 因为我平时用的时候都是 border:1px solid #000,都是同一个颜色所以看不出来 当我给每一个边分别设置颜色的时候才发现 他们是以梯形 ...
妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0
css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示: ht ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
css 中可以继承的属性
CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...
随机推荐
hdu4087ALetter to Programmers(三维旋转矩阵)
参考 三维旋转矩阵 + 矩阵加速 这个还要用到仿射变换. 平移 translate tx ty tz 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 缩放 scale kx ky ...
php extension memcache and memcached module on centos6
环境 centos6 php5.6 nginx 1.8 防火墙均关闭 我在这里简单描述一下过程 #install nginxyum -y install pcre pcre-devel openssl ...
最近调试HEVC中码率控制, 发现HM里面一个重大bug
最近调试HEVC中码率控制, 发现里面一个重大bug! 码率控制中有这么一个函数: Int TEncRCGOP::xEstGOPTargetBits( TEncRCSeq* encRCSeq, Int ...
python中的列表排序
对列表进行排序是常见的操作,最简单的方式是使用sort()函数. 1.一般用法 不管列表元素是数.字符串还是元组,函数sort()总是就地操作列表,按升序进行排列元素,并返回None. #数 > ...
正则去除字符串中的html标签,但不去除<;br>;标签
一.去除html标签 filterHTMLTag(msg) { var msg = msg.replace(/]*>/g, ''); //去除HTML Tag msg ...
1. Ansible 简介
目录 1. Ansible 是什么? 2. Ansible 特性 3. 控制主机需求 4. 被管理节点需求 1. Ansible 是什么? Ansible 是一个配置管理系统(configuratio ...
session和application内置对象
一.Session内置对象 分析得知request内置对象中的属性只是在当次请求中有效,经过客户端跳转之后就无效,因为客户端跳转属于第二个请求,也就是说request只代表当次请求的对象,如果要让客户 ...
Jmeter笔记(Ⅲ) Jmeter的非GUI操作
在启动Jmeter时,我们会看到这样一句提示: 不要使用GUI模式(界面模式)进行负载测试,GUI模式只能用于创建测试和调试.进行负载测试时,需要时用非GUI模式. 那么为什么进行负载测试时一定要用非 ...
【druid 】数据库连接池-sql解析
/a/1190000008120254?utm_source=tuicool&utm_medium=referral sql解析 Druid 的 ...