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:0;} 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

时间: 2024-12-15 06:56:32

CSS属性 table 的 border-collapse 边框合并的相关文章

利用CSS边框合并属性打造table细边框

CSS代码: <style> table{ border-collapse: collapse;/* 边框合并属性 */ width:200px; } th{ border: 1px solid #666666; } td{ border: 1px solid #666666; } </style>HTML代码: <table> <tr> <th></th> <th></th> </tr> <

table 边框合并

border-collapse:collapse 用于表格属性, 表示表格的两边框合并为一条; <style type="text/css"> table { border-collapse:collapse; } table, td, th { border:1px solid black; } </style> <table> <tr> <th>Firstname</th> <th>Lastname

table设置border没有空隙

我们经常会遇到设置table边框的时候,对于非专业设计来说,很想淡然的设置td的css td {border:solid#000 1px;} 但是我们看到的效果总是不如人意,每个cell中间总会有一个像素的空白 如下效果: 那么如何设置才能把这个边框中的空白像素去掉呢? 设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid#000 1px;}可以很方便的去掉这个效果 样式{border-collap

CSS属性一览

CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 "CSS" 列指示该属性是在哪个 CSS 版本(CSS1.CSS2 或 CSS3)中定义的. CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画. 3 animation 所有动画属

【CSS3】table的css属性

table的css属性 border-collapse 设置是否把表格边框合并为单一的边框. border-spacing 设置分隔单元格边框的距离. caption-side 设置表格标题的位置. empty-cells 设置是否显示表格中的空单元格. table-layout 设置显示单元.行和列的算法. 1.border-collapse:设置是否把表格边框合并位单一边框 table, td, th { border-collapse:separate;/*默认值,边框会被分开*/ bor

CSS display:table属性用法- 轻松实现了三栏等高布局

display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用,但是现在是移动端的天下了,ie 说拜拜吧~ 与其他一些display属性类似,table-cell同样会被其他一些CSS属性破坏,例如float, posi

基于CSS属性display:table的表格布局的使用

项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的display:table的DIV,然后在嵌套的表格DIV内部通过控制行列数和行列的高度,实现单元格合并.个人建议全新实现使用<table> HTML标签即可 一.CSS display属性的表格布局相关属性的解释: table    此元素会作为块级表格来显示(类

CSS属性之表格(Table)

CSS属性之表格(Table) HTML为表格定义了3个元素用于对行进行分组,它们是 thead (表头).tbody (表格主体).tfoot (脚注). 在HTML4中文档结构中的 tfoot 必须出现在 tbody之前,HTML5去掉了这个限制. 如果在源代码中没有写分组元素时,浏览器会自动创建 tbody ,所以选择器 table > tr 总是无效,因为中间有 tbody. 如果表格主体中的每一行都是以 td 元素开头,那这些 th 就是行标题. colgroup 与 col <co

table中的边框合并实例

<html><head><style type="text/css">table,th,td{border:1px solid blue;border-collapse:collapse;}</style></head> <body><table><tr><th>Firstname</th><th>Lastname</th></tr>