表格不用border-collapse也能实现单线边框
2016-05-02 14:57
344 查看
css中控制表格边线属性border-collapse:collapse,偶尔由于其他样式的影响,会让表格table的边框显示不全,其实用另外一种方法也可以实现border-collapse:collapse的效果。
给table上边和左边设上边框线,给td下边和右边设上边框线就可以了。
效果如下图:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title>
<style type="text/css">
.myTb{border-top:1px solid #999;border-left:1px solid #999;border-spacing:0;}
.myTb td{border-bottom:1px solid #999;border-right:1px solid #999;padding:10px 30px;}
</style>
</head>
<body>
<table class="myTb">
<tr>
<td>http</td>
<td>:</td>
<td>//</td>
</tr>
<tr>
<td>www</td>
<td>.</td>
<td>daixiaorui</td>
</tr>
<tr>
<td>.</td>
<td>com</td>
<td>/</td>
</tr>
</table>
</body>
</html>
给table上边和左边设上边框线,给td下边和右边设上边框线就可以了。
效果如下图:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title>
<style type="text/css">
.myTb{border-top:1px solid #999;border-left:1px solid #999;border-spacing:0;}
.myTb td{border-bottom:1px solid #999;border-right:1px solid #999;padding:10px 30px;}
</style>
</head>
<body>
<table class="myTb">
<tr>
<td>http</td>
<td>:</td>
<td>//</td>
</tr>
<tr>
<td>www</td>
<td>.</td>
<td>daixiaorui</td>
</tr>
<tr>
<td>.</td>
<td>com</td>
<td>/</td>
</tr>
</table>
</body>
</html>
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”,带你探索前端的奥秘。
相关文章推荐
- web.xml中的url-pattern映射规则
- C/C++网络编程总结与ZeroMQ
- 码农小汪-Spring MVC -生产者、消费者限定 Content-Type Accept
- Scala学习笔记
- iOS中的KVC和KVO
- 设计模式之单例模式
- 23种设计模式(2):简单工厂模式
- 过渡
- HDU1175:连连看(DFS)
- CSS3之过渡及过渡事件
- STM32_USART
- redis主从复制深入解析
- 从尾到头打印链表
- 「なそう」と「なさそう」
- Tutorial: Triplet Loss Layer Design for CNN
- 设置IIS7/IIS7.5的FTP支持断点续传
- Z字形编排数组
- 变形
- 渐变
- 数据结构之排序:排序基本概念和各种排序方法总结