【CSS】用css控制cellspacing、cellpadding分析

    默认情况下,table单元格之间是有间隔的。一般情况下,我们会利用table的cellpadding和cellpadding来清除默认样式,如下:

    <table cellspacing="0" cellpadding="0"></table>

    但这样做不仅增加了代码的体积,而且也极其不符合样式与内容分离的web标准,因此使用css控制cellspacing/cellpadding便有其意义。



    先说结论,采用以下两行样式即可:

    table{border-collapse:collapse;}
    th,td{padding:0;}

    th, td{padding:0;}效果等同于cellpadding="0"。

    table {border-collapse:collapse;}效果类似cellspacing="0"。为何是类似呢?因为前者是连同边框border一同去掉了,可参见下面的例子。与cellspacing="0"等同的应该是table{border-spacing:0;},但是IE6不支持,所以还是用border-collapse。

    做了一个测试页面,直观看效果可能更容易理解:

    提示:你可以先修改部分代码再运行。

    以下是border-collapse属性和border-spacing属性介绍,至于padding属性同其他的盒状模型。

    border-collapse属性

    用法:设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。

    默认值: separate
    继承性: yes
    版本: CSS2
    JavaScript 语法: object.style.borderCollapse="collapse"

    浏览器支持:所有主流浏览器都支持 border-collapse 属性。说明:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

    描述
    separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
    collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
    inherit 规定应该从父元素继承 border-collapse 属性的值。

    border-spacing 属性

    用法:设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。

    默认值: not specified
    继承性: yes
    版本: CSS2
    JavaScript 语法: object.style.borderSpacing="15px"

    浏览器支持:所有主流浏览器除了IE6都支持 border-spacing 属性。

    描述
    length length 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数,那么定义的是水平和垂直间距。如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。
    inherit 规定应该从父元素继承 border-spacing 属性的值。

    更多关于CSS样式属性的解释提供 CSS样式表手册 供大家参考。



    本博客所有文章如无特别注明均为原创。
    复制或转载请以超链接形式注明转自枫芸志,原文地址《【CSS】用css控制cellspacing、cellpadding分析
    标签:
    分享:

还没有人抢沙发呢~

无觅相关文章插件,快速提升流量