- 浏览: 54070 次
- 性别:
- 来自: 北京
最新评论
在用CSS给表格定义1像素的边框的时候,是个比较棘手的问题,在定义的时候,很容易把边框定义重复了,很多人问过我这个问题,今天我把我为表格添加的方法给大家,其实方法很简单的,就是逻辑关系比较难懂。
表格里面的单元格都是四条边的,那这单元格里面的四条边怎么定义好呢?我们拿一个只有四个单元格的表格(下面用1,2,3,4来表示四个单元格)来做模型,我是先定义的两个临边,任意两个临边都可以,我这里假定定义的是上边框和右边框。1定义之后是上边和右边有了边框,2定义之后也是上边和右边有了边框,而2同时也有了1的右边框作为它的左边框,所以2已经有了三个边框。我们再看3,当定义了上边和右边之后,那1就有了下边框,后面的4也有了左边框,然后4被定义之后,上面的2就有了下边框,也就是说2的四个边框都定义了,然后我们再观察这四个单元格,你会发现只剩下1的左边框、3的单元格的左边框和下边框及4的下边框没有定义了,而这四个边框正好是表格的左边框和下边框(图片上面红色的边框),所以大家就明白了怎么定义了吧,再给整个的table定义一个左边框和下边框就可以了。
于是我们的CSS就出来了:
.table_border td{border-top:1px #DDD solid;border-right:1px #DDD solid;}
.table_border{border-bottom:1px #DDD solid;border-left:1px #DDD solid;}
.table_border{border-bottom:1px #DDD solid;border-left:1px #DDD solid;}
这样定义好之后,在我们以后用的时候只需要在table上面加上table_border这个class就可以了。
发表评论
-
DIV+CSS常用的Html网页布局代码
2009-09-28 23:06 939单行一列以下是引用片段:body { margin: 0 ... -
Javascript+css 实现网页换肤功能
2009-09-28 23:06 935Html代码部分: 1.要有一个带id的样式表链接,我 ... -
五行代码带来的无缝滚动程序
2009-09-28 23:05 614element.appendChild(newNode) 方法 ... -
网页视频代码集合
2009-09-28 21:15 10881.avi格式代码片断如下: <object id=& ... -
经验记录: 在css调用时 可以将css写成.txt 形式!!
2009-09-24 00:18 783同题 -
ps做透明背景pbg
2009-09-23 11:16 982SHIFT+ALT+CTRL+S 保存web图时 保 ... -
常用的"收藏,打印,另存为"等JS代码(按纽INPUT和链接形式)
2009-09-14 21:49 1046脚本说明: 把如下代码加入<body>区域中: ... -
window.open()的所有参数列表
2009-09-14 21:51 517前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹 ... -
关于上传图片自动添加网址之upfile_photo.asp
2009-09-14 22:02 926strJS = strJS & "paren ... -
免费百度搜索引擎代码、Google搜索引擎代码、综合搜索引擎代码
2009-09-15 01:10 4763一、百度搜索代码 1、 <table width=9 ... -
css+div实现圆角
2009-09-15 16:03 9801: <html><head>< ... -
百度有啊css圆角方案
2009-09-15 16:06 664<!DOCTYPE html PUBLIC " ... -
css之自动换行
2009-09-16 07:37 960自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字 ... -
css里直接定义table
2009-09-16 07:40 600<style>table{border-colla ... -
jquery 冲突与prototype(工具网站笔记)
2009-09-16 16:50 726prototype 在定义过程中采用$()来代替 docume ... -
常用的"收藏,打印,另存为"等JS代码(按纽INPUT和链接形式)
2009-09-18 19:22 626脚本说明: 把如下代码加入<body>区域中: ... -
jquery和prototype冲突解决
2009-09-18 19:54 819最近做项目用到了jQuery验证,可在应用的js中也有prot ... -
Ajax技术(WEB无刷新提交数据)- 及ajax出生
2009-09-19 11:33 1117Ajax内部交流文档一、使用Ajax的主要原因 1、通过适当的 ...
相关推荐
在默认的情况下,我们的CSS将Table的边框清除掉了,是没有的,看到的效果是这样的。 无边框Table 为了给,表格加一个边框,我在CSS里面写了这样一句: .table{border:solid 1px #add9c0;} 哎,看来是我太天真了,...
我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下面我们先把有关表格边框的css语法整理出来,然后另外介绍怎样用css美化表格的边框。 有关表格边框的css...
Table默认是有外边框,有内边框的,那么如何通过css样式简单实现Table没有外边框,只有内边框呢?下面有个不错的示例,大家可以看看
7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css,非常酷炫,开箱即用,做大数据的可以使用哦
style type=”text/css”> table{ border-collapse: collapse; border: 0px solid #999; } table td { border-top: 0; border-right: 1px solid #999; border-bottom: 1px solid #999; border-left: 0; } ta
CSS 边框属性(Border 和 Outline) CSS 背景属性(Background) Color 属性 Box 属性 CSS 尺寸属性(Dimension) 内容生成(Generated Content) 可伸缩框属性(Flexible Box) Grid 属性 Hyperlink 属性 CSS 字体...
table 圆角 html5 css3
比如这样一个CSS 复制代码代码如下: .td3{ font-size: 14px; color: #FFFFFF; background-color: #000000; BORDER-RIGHT: #f6f6f6 1px solid; //显示右边框为1px,如果不想显示就为0px BORDER-TOP: #f9f9f9 0px ...
牛腩新闻发布系统中 在table处遇到了麻烦,这个麻烦是我们在css中已经写好了使table不显示边框的代码,在ie浏览器中显示正常,但是在火狐和谷歌浏览器中显示不正常,table的每个边框都显示了出来,因为浏览器不同...
style type=”text/css”> TABLE { background: blue; border-collapse: separate; border-spacing: 10pt; border-top: 15px solid red; border-left: 15px solid red; border-right: 5px dashed black; border-...
CSS控制表格边框 CSS控制表格样式 除了表格标签自带的属性外,还可用CSS的边框、宽高、颜色等来控制表格样式。此外,CSS中还提供了表格专用属性,以便控制表格样式。 本节将从边框、边距和宽高三个方面,详细讲解CSS...
.
大家经常会发现Table的BORDER设置为1,得到的边框却不是想要的1个像素的细边框,于是很多人去想方设法做出细边框的效果。
在网页制作中,细边框这个制作方法是必不可少的。这里介绍2种常见的表格细边框制作方法,均通过XHTML验证。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
用css不用以前比较传统的用表格背景+单元格背景实现的效果
个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS,因此表格使用了TABle,用CSS控制Table的边框像Windows系统窗体里的边线一样,表格边框为凹陷立体效果。