用CSS设置Table的细边框的最好用的方法
2015-05-29 00:00
603 查看
今天同事向我问了一个问题,他要设置table的边框,说实话,我也很少弄过table的边框。
通过差一些资料http://blog.sina.com.cn/s/blog_565812e60100czbn.html,
我发现设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}是一个非常不错的方法。
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>导航页档</title>
<style type="text/css">
table
{
border-collapse: collapse;
border: none;
width: 200px;
}
td
{
border: solid #000 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
军事
</td>
<td>
历史
</td>
<td>
新闻
</td>
</tr>
<tr>
<td>
军事
</td>
<td>
历史
</td>
<td>
新闻
</td>
</tr>
</table>
</body>
</html>
通过差一些资料http://blog.sina.com.cn/s/blog_565812e60100czbn.html,
我发现设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}是一个非常不错的方法。
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>导航页档</title>
<style type="text/css">
table
{
border-collapse: collapse;
border: none;
width: 200px;
}
td
{
border: solid #000 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
军事
</td>
<td>
历史
</td>
<td>
新闻
</td>
</tr>
<tr>
<td>
军事
</td>
<td>
历史
</td>
<td>
新闻
</td>
</tr>
</table>
</body>
</html>
相关文章推荐
- 黄页前台联动菜单修改时不能显示,要重新选择|没样式
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
- 自从用了Less 编写css,你比以前更快了~(sublime编译)
- css 填坑常用代码分享
- sublime 经验总结 主题有 less2css
- CSS伪元素,伪类选择器
- CSS布局遇到的问题小结
- 清除浮动的几种方法
- 【从0到1学Web前端】CSS定位问题二(float和display的使用)
- 【从0到1学Web前端】CSS定位问题二(float和display的使用)
- 【从0到1学Web前端】CSS定位问题二(float和display的使用) 分类: HTML+CSS 2015-05-28 22:03 812人阅读 评论(1) 收藏
- menu-普通menu弹出框样式
- CSS3用法理解
- CSS字体中英文名称对照表(转)
- 《CSS那些事儿》读书笔记
- 关于css里的@font-face 和font-family属性
- 用css3实现各种图标效果(2)
- 用css3实现各种图标效果(2)
- 关于写CSS时类似div.ex中间有空格的问题
- 动态为页面添加CSS样式文件引用