CSS如何设置html table表格边框样式
CSS如何设置table表格边框样式
对table设置css样式边框,分为几种情况:
1、只对table设置边框
2、对td设置边框
3、对table和td技巧性设置表格边框
4、对table和td设置背景,实现完美表格边框
以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示。为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例;table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div盒子,分别CSS命名为“.table-a”、“.table-b”、“.table-c”、“.table-d”。
一、只对表格table标签设置边框 - TOP
只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。
案例详细如下:
1、对应css代码
- <style>
- .table-a table{border:1px solid #F00}
- /* css注释:只对table标签设置红色边框样式 */
- </style>
2、对应html代码片段
- <div class="table-a">
- <table width="400" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td width="105">站名</td>
- <td width="181">网址</td>
- <td width="112">说明</td>
- </tr>
- <tr>
- <td>DIVCSS5</td>
- <td>www.divcss5.com</td>
- <td>CSS学习</td>
- </tr>
- <tr>
- <td>CSS5</td>
- <td>www.css5.com.cn</td>
- <td>CSS切图</td>
- </tr>
- </table>
- </div>
3、案例截图
二、对td设置边框 - TOP
对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。
详细案例教程如下:
1、对应css代码
- <style>
- .table-b table td{border:1px solid #F00}
- /* css注释:只对table td标签设置红色边框样式 */
- </style>
2、对应html源代码片段
- <div class="table-b">
- <table width="400" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td width="105">站名</td>
- <td width="181">网址</td>
- <td width="112">说明</td>
- </tr>
- <tr>
- <td>DIVCSS5</td>
- <td>www.divcss5.com</td>
- <td>CSS学习</td>
- </tr>
- <tr>
- <td>CSS5</td>
- <td>www.css5.com.cn</td>
- <td>CSS切图</td>
- </tr>
- </table>
3、案例截图
三、对table和td技巧性设置表格边框 - TOP
如上第二点,只对表格对象td设置单一边框样式,中间部分td与td标签之间就会出现双边框现象。
解决方法:对td只设置两个边的边框,对table也设置两个边的边框样式。
解释:对td设置左与上边框,这样td与td相邻就会只出现单一边框样式,这样就会出现表格右侧和下部没有边框,这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。
1、对应css代码:
- <style>
- .table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00}
- .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00}
- /*
- css 注释:
- 只对table td设置左与上边框;
- 对table设置右与下边框;
- 为了便于截图,我们将css 注释说明换行排版
- */
- </style>
2、对应html源代码片段:
- <div class="table-c">
- <table width="400" border="0" cellspacing="0" cellpadding="0">
- <tr>
- <td width="105">站名</td>
- <td width="181">网址</td>
- <td width="112">说明</td>
- </tr>
- <tr>
- <td>DIVCSS5</td>
- <td>www.divcss5.com</td>
- <td>CSS学习</td>
- </tr>
- <tr>
- <td>CSS5</td>
- <td>www.css5.com.cn</td>
- <td>CSS切图</td>
- </tr>
- </table>
3、表格边框实现案例截图
CSS如何设置html table表格边框样式相关推荐
- CSS设置原生table表格边框样式(添加表格横线)(附最后表格td画斜线)
table表格边框样式: 推荐这种 原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
- css隐藏表格线,用CSS改变(隐藏)表格边框样式
用CSS改变表格边框样式,很实用的一种方法. 制作方法: 将下面的代码复制到 ~里,此为隐藏下边框 style="border-collapse: collapse; border-bott ...
- html中表格边框好看的样式,table完美css样式 table表格边框样式
蕃薯耀2016年6月15日星期三 一.的css样式 边框线不会重复叠加,不会有些粗有些细,全部统一. /**/ -{ /*-moz--; --border-radius:5px; border-rad ...
- table表格边框样式_如何在CAD创建、导入表格?原来CAD的表格功能这么强大
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.如果喜欢就关注订阅吧!也不要忘记点赞哦~亲,看的开心可以点个好看 . ...
- css设置html表格边框颜色,互联网常识:CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度 边框样式 边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
- 在PHP中给表格加上css样式,表格CSS样式设置 给table表格设置CSS样式表
表格table tr td CSS花色设置 给table表格设置CSS花式表 在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
- php怎么给table添加背景,怎样对table和td设置背景实现表格边框
很多朋友都很苦恼表格样式怎么设置,今天就给大家详细讲解一下css表格样式怎么设置,之前说过三种方法,只对table设置边框,对td设置边框,对table和td技巧性设置表格边框现在给大家带来怎样对ta ...
- css单线边框_HTML table表格边框设置为单线的方法
因为平时在html页面中设计表格样式时,一般都是使用 DIV+CSS 的方式来实现,很少使用 table 表格元素,而今天图省事使用 table 表格元素时,发现设置其边框为的样式为双线的形式,所以就 ...
- bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色 设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
最新文章
- python or的用法_python中and和or的用法
- CentOS 安装NTFS-3G,让系统支持NTFS分区的方法
- linux splash qt,ubuntu14.04 splash安装
- servlet基础知识
- UVa 1354 天平难题 枚举二叉树
- 微软风格的CSS横向菜单
- Go 类型转换、类型断言与类型选择
- {面试题4: 替换空格}
- linux的df命令根目录,详细分析Linux df命令的使用方法
- 分享一个前辈的NPOIhelper
- elment-ui的table组件多行合并
- hdoj6298:Maximum Multiple(找规律,总结)
- 腾讯云搭建Socks5多IP代理服务器实现游戏单窗口单IP完美搭建教程附带工具
- 工业相机与SCARA机械臂的坐标系标定
- 加装固态硬盘+安装win10系统
- win7不能在本地计算机启动防火墙,win7操作中心无法启用防火墙怎么解决
- ICIP2021:VVC RPR参考结构改进
- Erlang之父Joe Armstrong确认将参加中国软件开发者大会
- 使用VBA 合并相同单元格
- 一文搞定docker创建私有镜像仓库(配置启动http和https方式私有仓库服务,查询、删除私有仓库镜像)