css中的border-collapse属性如何设置表格边框线?(代码示例)
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么?
border-collapse属性设置表格边框线的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们来了解一下css border-collapse属性是什么?它的作用。
border-collapse 属性:设置表格的边框是否被合并为一个单一的边框,即:用于设置表格边框是合并显示还是分开显示。
border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:
-- separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;
-- collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;
-- inherit:规定应该从父元素继承 border-collapse 属性的值。
双线表格边框的实现
html代码:
<table>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
<tr>
<td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
</tr>
</table>
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-collapse属性如何设置表格边框线?(代码示例)的更多相关文章
- 原来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:规定添加到 ...
随机推荐
- python的索引与切片和元祖
'''索引: 1.索引从0开始 2.末尾元素为 -1 3.能被for循环,有序的数据集合 切片: 1.顾头不顾尾 2.a = "123abcdfg" print(a[0::2]) ...
- 牛客小白月赛12 H 华华和月月种树 (离线dfs序+线段树)
链接:https://ac.nowcoder.com/acm/contest/392/H 来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 131072K,其他语言2621 ...
- Linux用户影子文件——shadow
Linux使用不可逆的加密算法(如MD5,SHA1等)来加密口令.和/etc/passwd类似,/etc/shadow文件中每条记录用冒号“:”分隔,形成9个域,格式如下所示: username:pa ...
- Linux启动原理
Linux系统启动原理 #!此文章参考某godedu,用于复习查看 centos6系统 centos6系统启动过程 1. 加载 BIOS 的硬件信息,跟据设定取得第一个可开机引导设置,如:光驱,硬盘, ...
- pyinstall python文件打包成二进制exe文件
pycharm + python3 + win7 1 pip install pyinstall (官网) 2 准备 .py 文件 3 具体例子 from PyQt5.QtWidgets impor ...
- 直接插入排序java代码
//直接插入排序(无哨兵) 通过测试 public class InsertSortTest{ public static void insertSort(int[] arr) { for (int ...
- 有效的结构化思维训练,MECE分析法
MECE原则,表达精准分类与全面性的有效利器 结构化思维的本质就是逻辑,其目的在于对问题的思考更完整.更有条理,它帮助我们一个一个找到线头,理清思路,探求事物之间的相互联系.MECE分析法是一种结构化 ...
- [sdoi2015]排序(搜索+剪枝优化)
Description 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1<=i<=N),第i中 ...
- codeforces555B
Case of Fugitive CodeForces - 555B Andrewid the Android is a galaxy-famous detective. He is now chas ...
- Linux 搭建Mysql主从节点复制
Linux环境 Centos 6.6 64位 准备两台服务器,搭建一主一从,实现Mysql的读写分离和数据备份 主节点 192.168.43.10 leader 从节点 192.168.43.20 d ...