CSS 怎么去单元格 (td) 之间的空格(间隙)? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
单元隔间隔对应 table 标签上的 cellpadding 和 cellspacing, 这里可以用 CSS 实现, cellpadding 对应 td 的 padding. 去除边框 cellspacing 的间隔有以下两种方法:
方法一: border-collapse:collapse
border-collapse 默认值为 separate, 即每个 td 单元格都有独立的边框; collapse 表示相邻单元格共用一个边框, 此时 border-spacing 将不起作用, 设置为 collapse 单元格间距将消失.
- table {
- border-collapse: collapse;
- }
- table tr td {
- border: solid 2px #222;
- }
方法二: 设置 border-spacing:0
此时边框间隔为 0, 看上去像是被合并了, 但每个 td 都会有两个边框, 相邻 td 边框会比最左 / 最右的不邻 td 的边框厚 2 倍, 为了使单元格边框宽度一致需要特殊处理:
- table {
- border-spacing: 0;
- border-bottom: solid 2px #222;
- border-right: solid 2px #222;
- }
- table tr td {
- border-top: solid 2px #222;
- border-left: solid 2px #222;
- }
隔行显示不同背景颜色
可使用 nth-child 伪类实现, 参数分为 odd(奇数行)和 even(偶数行), 只需复写一个即可
- table tr {
- background: #fff;
- }
- table tr:nth-child(even) {
- background: #ccc;
- }
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17627.html