html设置table border,用css来设置table的border
在网页中table是一种很好的展示数据的标签。默认情况下,table是没有border的,但是我们为了好看,经常要给table加上border。而且IE7/8/9下border的颜色还不一样,下面我们就来看看如何用css来控制table的border的显示。
首先,我们创建一个简单的table,代码如下:
first row
first row
second row
second row
初始样式很简单:
.my-table {
border: 1px solid #ccc;
}
这时候,table在各个浏览器下面表现几乎一致,我选取了chrome下的截图
这时候,如果我们需要每行都加上border呢,应该怎么做?聪明的你,应该想到了tr标签吧,没错,我们来试试看,改写css如下:
.my-table {
border: 1px solid #ccc;
}
.my-table tr {
border: 1px solid blue;
}
然后刷新下页面,很遗憾,什么都没有发生。说明,在tr上面写border是没有作用的。那么,我们再试试td标签吧,说不定会有惊喜哦,改写css如下:
.my-table {
border: 1px solid #ccc;
}
.my-table td {
border: 1px solid blue;
}
这下子我们能看到新的变化咯,各浏览器表现基本一致,但美中不足的是,td的border之间有空格:
为了美观,我们还得去掉单元格之间的空白,使用border-collapase:collapase,改写css如下:
.my-table {
border: 1px solid #ccc;
border-collapse: collapse;
}
.my-table td {
border: 1px solid blue;
}
看看现在的table是什么个样子,不同浏览器下表现不一样咯。我们从下图可以看到,在chrome和FF下面,td的边框会取代table外面的边框,而IE下面table的外框没有变化,下次用点艳丽的颜色来标识更明显。
那么,怎样才能达到一致呢?我发现,如果将table的外边框的宽度增大就可以;严格说来,应该遵循这么一个规则,外边框的宽度和td的宽度比较,哪个宽则显示该边框。
例如我分别设置table和td的border宽度为2px和1px,然后再设置一个5px和4px来对比看看(注意,我已经把颜色换得更醒目咯):
其实,通过实验我们发现,这个时候各个浏览器下面,table的表现是一致的。平时在写css的时候,使用上面的代码,就能保证大部分浏览器的兼容性啦,包括IE6。
update:20121108
其实在tr上写border是有样式的,只不过与在td上写border的样式相同。如果想单独针对一行写border,那么你可以使用如下的方式:
.my-table td {
border-bottom:1px solid blue;
}
html设置table border,用css来设置table的border相关推荐
- php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- html设置表格宽度最小,css如何设置表格宽度?
css设置表格宽度的方法:直接使用css设置表格table标签的width属性即可设置表格宽度,浏览器会自动按照td宽度的比例来调整td宽度. css设置表格宽度: 例1:Table的宽度为600px ...
- css样式里把背景设置为图片,利用css如何设置全屏背景图片
利用css如何设置全屏背景图片 如果你有一张比较绚烂的图片想做背景,可以这样设置,就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网! 代码如下: body{ backg ...
- html语言设置网页背景,HTML+CSS入门 设置网页中的背景图片的5个属性
本篇教程介绍了HTML+CSS入门 设置网页中的背景图片的5个属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在css代码中设置背景图片的方法,包括背景图片.背景重复 ...
- html设置顶部背景颜色,css怎么设置背景颜色?
css怎么设置背景颜色?下面本篇文章就来给大家介绍一下使用CSS设置背景颜色的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用background-colo ...
- android设置webview光标颜色,CSS自定义设置元素闪烁光标颜色
这次给大家带来CSS自定义设置元素闪烁光标颜色,CSS自定义设置元素闪烁光标颜色的注意事项有哪些,下面就是实战案例,一起来看一下. 前言因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不 ...
- css设置div不可编辑,css 怎么设置div不可点击
css设置div不可点击的方法:1.通过"event.preventDefault()"方法取消事件的默认动作:2.通过"event.stopPropagation()& ...
- 用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏?附源码!...
不少同学在设置网站背景图片时会遇到这么一个问题:背景图片总是不能铺满整个屏幕,不是图片太小就是图片被过度放大,显得不太美观.那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你. 实现效果: 源 ...
- html设置超出自动隐藏,css如何设置超出部分隐藏
CSS 一段文本怎么设置超过省略号显示 单行文本实现方法: 实现效果: 多行文本溢出显示省略号实现方法: 实现效果: 适用范围: 因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及 ...
最新文章
- spark读取hbase数据
- SM35/BDC Record / Log 导出
- 打开chrome控制台的快捷键
- NameError: name 'long' is not defined
- JS 数组去重的几个方法
- 浏览器与WEB服务器交互
- 布隆过滤器 (Bloom Filter) 详解
- 【图像隐写】基于matlab GUI变换域的可逆数字水印系统设计【含Matlab源码 1813期】
- 有关js获取屏幕宽度问题
- 娱乐大数据:《小时代》是属于谁的小时代?
- 编程题--疯狂序列----京东大数据笔试
- android 很多牛群叉界面库github地址
- _kbhit()以及_getch()函数的用法
- 为什么我们要使用Notes Domino?
- win10如何新增ip地址
- Windows10 java JDK1.8安装及环境配置
- 多维数组java_Java多维数组
- 在centos中配置固定ip
- radial-gradient
- Matlab中有与、 或、 异或的操作
热门文章
- 怎么改变rofl格式_手机怎么裁剪视频尺寸
- python except用法和作用_python上手--异常处理与文件
- mysql 导出dmp文件_MySQL数据库基础讲解
- EditText获取焦点并自动弹出软键盘
- django 业务逻辑写在view里吗?_Python Web框架Django简介
- iOS中的armv6、armv7、armv7s
- 熟悉又陌生 彪悍徐茂栋的双面人生
- C#线程 在某一时间内,只有N个线程在并发执行,其余都在队列中的实现(转载)...
- LINQ 中的 select
- in作为介词的用法_英语中in/on/at/to/from/by/with/for/about/after/before的用法