说明

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 边框合并的更多相关文章

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

    CSS代码: <style> table{ border-collapse: collapse;/* 边框合并属性 */ width:200px; } th{ border: 1px so ...

  2. Table 边框合并(collapse)

    border-collapse:collapse 用于表格属性, 表示表格的两边框合并为一条; <style type="text/css"> table { bord ...

  3. CSS属性一览

    CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打 ...

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

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  5. CSS开发技巧(二):表格合并边框后的单元格宽度计算

    前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...

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

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  7. HTML 学习笔记 CSS样式(外边框 外边框合并)

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  8. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  9. CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

    本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...

随机推荐

  1. runtime error (运行时错误)

    比如说: ①除以零 ②数组越界:int a[3]; a[10000000]=10; ③指针越界:int * p; p=(int *)malloc(5 * sizeof(int)); *(p+10000 ...

  2. 关于Gson无法将匿名类转化为json字符串的问题

    在使用gson过程中,一般会将数据存在一个对象模型中,使用gson将模型转换成json字符串用于数据交互. 代码形如: ArrayList<String> list = new Array ...

  3. TX2平台CAN总线收发功能的测试

    前言 项目实现过程中需要将获取的数据信息通过CAN总线传输到控制规划模块,本文主要介绍如何在TX2平台测试CAN总线的收发功能. TX2是英伟达旗下为嵌入式平台人工智能应用开发出的一个硬件平台,TX1 ...

  4. Lua基本语法-lua与C#的交互(相当简单详细的例子)

    lua脚本 与 C#的交互 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Lua And C# -- ...

  5. IDEA中遇到One of the two will be used. Which one is undefined.

    某次启动idea的时候看到控制台提示如下错误 : objc[]: Class JavaLaunchHelper is implemented .0_131.jdk/Contents/Home/bin/ ...

  6. WinHex简介

    WinHex是一个专门用来对付各种日常紧急情况的小工具.它可以用来检查和修复各种文件.恢复删除文件.硬盘损坏造成的数据丢失等.同时它还可以让你看到其他程序隐藏起来的文件和数据.得到 ZDNetSoft ...

  7. test20180922 倾斜的线

    题意 问题描述 给定两个正整数P和Q.在二维平面上有n个整点.现在请你找到一对点使得经过它们的直线的斜率在数值上最接近P/Q(即这条直线的斜率与P/Q的差最小),请输出经过它们直线的斜率p/q.如果有 ...

  8. day 2克隆虚拟机器minimal需要注意的问题和制作本地yum源和常用的Linux的命令

    ------- 克隆bee2 PS:因为复制机器后,又多了一个网卡eth1.本来只有一个网卡eth0,下面是解决方案. 解决克隆后eth0不见的问题 1.直接修改vi  /etc/sysconfig/ ...

  9. C#中DateTime的缺陷 ---- 代替品DateTimeOffset

    C#中的DateTime在逻辑上有个非常严重的缺陷: > var d = DateTime.Now; > var d2 = d.ToUniversalTime(); > d == d ...

  10. php 中的引用

    php 有类似 C 中的指针 &. 但在 php 中叫 引用. 虽然和 传地址很像,但是差别很大.(估计底层实现应该差不多,只是猜想,有机会再研究) 这里有一个关于 php 的对象的赋值其实就 ...