使用CSS格式化Table样式

在网页里使用table的时候，样式一般比较难管理，因为table的有些样式与其它控件不太一样

1、table的分外边框，tr边框，td边框，它们之间都是有间距的

2、你可以指定它们之间的间距为0，但当你设置边框时，会发现边框是2px宽的，因为在table里，tr、td等元素是相邻的

所以想做一个好看的table样式可以参考以下的步骤：

1、table设置

border-collapse:collapse; /*设置间距为0*/
border: 1px solid #808080; /*设置table的最外层边框*/

2、tr设置

/*设置tr的上边与下边样式*/

border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #808080;
border-bottom-color: #808080;

3、th,td设置

/*设置th,td的左边与右边样式*/

border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #808080;
border-left-color: #808080;
4、.NoBorder类设置

/*设置不显示边框的样式*/

.NoBorder {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

通过前3项就可以显示一个全边框的table，

如果你想去掉某行或某列的边框，将tr或td的class设置成.NoBorder就可以了

如果你想去掉table最外面的边框，将table的class设置成.NoBorder就可以了

非常方便，当然我这个方法不能解决所有设计需求，但它是目前比较规整、方便的方法，代码量也比较小，逻辑也简单

大家可以在这个基础上进一步扩展做出更多样的table

使用CSS格式化Table样式相关推荐

html表格展开格式,4款简单常见的纯CSS表格(table)样式
本文介绍4款简单常见的纯CSS表格(table)样式. 1.默认表格(default table) 添加pure-table类样式化表格, 此类向表元素添加填充(padding)和边框(borders ...
css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动一.需求二.实现一.需求需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
【CSS】Table样式
一.table td的宽度详解 Table只有Table的宽度是可以设置的,并且各个浏览器理解一致原则上应该将table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值 Table的宽度 ...
css 设置table样式
<style type="text/css" > table tr td{height:39px; font-size: 13px; line-height ...
php修改table样式,CSS怎么设置table边框样式
今天和大家说一下CSS如何设置table表格边框样式,对table设置CSS样式边框分为4种情况,以下分别详细讲解这四种情况需要怎么处理. 1.只对table设置边框 2.对td设置边框 3.对tab ...
html5 table样式css,css表格样式的布局篇
进修了div css构造后,确凿css对表格样式的设置就变得简单了.一样平常对table配置class或id来对其设置装备摆设CSS花色. 表格CSS花式配置实例代码: 表格CSS设置装备摆设实例 C ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
DIV+CSS和Table区别
众所周知,这(DIV+CSS和Table)两种语句都经常被开发人员使用了来控制界面显示,但是这两种语法也有很大的不同,下面分别从这两种语句的优缺点进行分析: 一.制作效率我想没人反对表格的制作效率要 ...
还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加上图: 带鼠标滑动效果的table样式看起来比较清爽样式 <he ...

使用CSS格式化Table样式

使用CSS格式化Table样式相关推荐

最新文章

热门文章