CSS属性 table 的 border-collapse 边框合并
说明
该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框
separate 缺省值。边框分开,不合并。
collapse 边框合并。即如果相邻,则共用同一个边框。
虽然在DIV+CSS 时代 table 的权重越来越低,但是有时候,还是局部地方table 还是挺好用的
特别是制表方面,还是table 比较的方便。
当然,制表肯定少不了边框,但是如果你直接在td上加边框,就会出现一种情况,table 的外围一周是单线,里面都是双线。
你也可以通过其他分开设置的方法实现全部单线,但是这儿有一个最最简单的方法,CSS 里提供了 border-collapse 属性可以控制相连边框的合并还是分离
CSS代码
<style>
<!--
table{ width:300px; border-collapse:collapse; overflow:hidden;} tr{ white-space:;} td{ height:30px; border:#333333 solid 1px;}
-->
<style>
html:
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
</tbody>
</table>
参考阅读:
http://www.manongjc.com/article/1211.html
http://www.manongjc.com/article/1212.html
CSS属性 table 的 border-collapse 边框合并的更多相关文章
- 利用CSS边框合并属性打造table细边框
CSS代码: <style> table{ border-collapse: collapse;/* 边框合并属性 */ width:200px; } th{ border: 1px so ...
- Table 边框合并(collapse)
border-collapse:collapse 用于表格属性, 表示表格的两边框合并为一条; <style type="text/css"> table { bord ...
- CSS属性一览
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- CSS开发技巧(二):表格合并边框后的单元格宽度计算
前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...
- 基于CSS属性display:table的表格布局的使用
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...
- HTML 学习笔记 CSS样式(外边框 外边框合并)
CSS外边距 围绕在元素边框的空白区域就是外边距 设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...
- 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)
W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...
- CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...
随机推荐
- WinRAR备份技巧 - imsoft.cnblogs
RAR控制台日常备份策略 run.batrar a -ep1 -agYYYY{年}MM{月}DD{日} 备份 @list.txt-ep1是忽略原文件路径,rar包里是一堆文件,没有目录结构-ag附加命 ...
- Unity 3D游戏-见缝插针源码
Unity见缝插针功能实现 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Sphere Rotatio ...
- 从dfs向动态规划过渡
据说每一个dfs,都能用动态规划思想做出来. 首先要明白dfs与动态规划的一些小要点 1)dfs重在通过使用递归来使用不同的选择,通过使用形参的改变实现不同情景的改变(形参既包括了代价,又包含了结 ...
- python入门20180717-迭代器、生成器和协程
迭代器.生成器和协程 python中任意的对象,只要它定义了可以返回一个迭代器的__iter__方法,或者支持下标索引的_getitem_方法,那么它就是一个可迭代对象. 可迭代的对象不一定就是迭代器 ...
- 重磅来袭,开源Asp.Net MVC网上商城BrnShop正式发布,提供源码下载(转)
BrnShop网上商城是以Asp.Net mvc3为基础开发的网上商城,源代码完全开源(企业版的源代码目前还没有完全整理完成,一旦整理完成也全部开源). 啥话也不说了,直接上源码:下载源码(由于公司服 ...
- 【转】linux下终端命令快捷键
原文网址:http://daaoao.blog.51cto.com/2329117/554177 linux下使用终端不可避免. 使用终端快捷键,当然会使你如虎添翼.记住他们吧 终端快捷键 tab=补 ...
- Array、ArrayList 区别
ArrayList可以算是Array的加强版,(对array有所取舍的加强). 存储内容比较(可包含元素的类型不同.数组要求存储同种类型): Array数组可以包含基本类型和对象类型, ArrayLi ...
- Word中回车和网页换行替换
回车^p 换行^l 用编辑中的查找替换即可 查找^l,替换为^p (一)有建议说按Delete键一个一个将其删除,这是麻烦的,其实可用WORD的查找替换工具一次性替换成回车符.查找--点特殊字符--手 ...
- php设计模式之职责链模式
<?php /** * @desc php设计模式之职责链模式(责任链模式) 定义:顾名思义,责任链模式为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这 ...
- 【python】实例-判断用户输入数字的类型
num=input("please input the num: ") print "the number your input is: "+str(num) ...