HTML小技巧将table边框改为细线
HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的。因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效,而且兼容所有浏览器。
细线表格如果单纯设置边框,很难保证浏览器兼容。常见的做法是利用 CSS2 的 "border-collapse:collapse;" 属性合并表格边框;并对 table 元素设置左边框和上边框,对 th 和 td 元素设置右边框和下边框。
HTML:
<table> <tr> <th>table head (row1, col1)</th> <th>table head (row1, col2)</th> <th>table head (row1, col3)</th> </tr> <tr> <td>table data (row1, col1)</td> <td>table data (row1, col2)</td> <td>table data (row1, col3)</td> </tr> <tr> <td>table data (row2, col1)</td> <td>table data (row2, col2)</td> <td>table data (row2, col3)</td> </tr>
</table>
CSS:
table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}
HTML小技巧将table边框改为细线的更多相关文章
- iOS开发小技巧 -- tableView-section圆角边框解决方案
[iOS开发]tableView-section圆角边框解决方案 tableView圆角边框解决方案 iOS 7之前,图下圆角边框很容易设置 iOS 7之后,tableviewcell的风格不再是圆角 ...
- [css小技巧]input去除边框问题
border:none;是不够的 (1)在谷歌浏览器添加 outline: none;去除点击后产生的边框; (2)IE7下border: none;还会有边框存在,改用border: 0;即可,同时 ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
- iOS:小技巧(不断更新)
记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...
- iOS:小技巧(19-02-12更)
记录下一些不常用技巧,以防忘记,复制用. 1.UIImageView 和UILabel 等一些控件,需要加这句才能成功setCorn _myLabel.layer.masksToBounds = YE ...
- Windows Azure一些小技巧集合
我最近做了一个Windows Azure上面的项目,自己在做的过程中遇到了很多问题.有的是我自己摸索解决,有的是到网上寻找零碎的信息结合起来解决的.我感觉应当把某些解决方法集中一下,方便我以后查阅,也 ...
- FineUI小技巧(1)简单的购物车页面
起因 最初是一位 FineUI 网友对购物车功能的需求,需要根据产品单价和数量来计算所有选中商品的总价. 这个逻辑最好在前台使用JavaScript实现,如果把这个逻辑移动到后台C#实现,则会导致过多 ...
- 编写css相关注意事项以及小技巧
一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-styl ...
- 文件上传小技巧/原生态【html篇】
引语:大家都知道,html中上传文件就一个input,type=file就搞定了.但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的.但是其实挺简单,今天就来说说上传文件小技巧吧 ...
随机推荐
- 61、请求数据进行gizp压缩
1.请求时进行头部处理 /** * 设置通用消息头 * * @param request */ public void setHeader(HttpUriRequest request) { // r ...
- 【Restore IP Addresses 】cpp
题目: Given a string containing only digits, restore it by returning all possible valid IP address com ...
- 【Search In Rotated Sorted Array】cpp
题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 ...
- vmware克隆centos修改linux mac地址
故障背景: 在vmware workstation中了完全克隆了一个已经存在的centos的虚拟机,启动之后发现网卡没有启动.于是重启一下network服务,发现提示错误信息“Device eth0 ...
- python拼接
拼接: name=zhuhuan age=23 salary=333 info=''' ----- info of %s----- age:%s name:%s salary:%s %(name,ag ...
- 11 JVM 垃圾回收(上)
引用计数法和可达性分析 垃圾回收,就是将已经分配出去的,但却不在使用的内存回收回来,以便再次分配.在 Java 虚拟机语境下,垃圾指的是死亡的对象所占据的堆空间.下面就总结一下如何如何辨别一个对象是否 ...
- uploadify 报http 302错误
uploadify 报http 302错误 原因是系统采用Forms认证,服务端加入匿名认证即可 具体配置如下: <location path="Base/Base/Upload&qu ...
- redis命令monitor详解
通过monitor这个命令可以查看数据库在当前做了什么操作,对于管理redis数据库有这很大的帮助 如图示,在redis客户端进行操作显示info,另一个窗口打开monitor就会显示出这个命令的操作 ...
- Mysql实战之索引
author:JevonWei 版权声明:原创作品 索引基础: 索引:提取索引的创建在的表上字段中的数据,构建出一个独特的数据结构: 索引的作用:加速查询操作:副作用:降低写操作性能: 表中数据子集: ...
- 【POJ3693】Maximum repetition substring (SA)
这是一道神奇的题目..论文里面说得不清楚,其实是这样...如果一个长度为l的串重复多次,那么至少s[1],s[l+1],s[2*l+1],..之中有相邻2个相等...设这时为j=i*l+1,k=j+l ...