zoukankan      html  css  js  c++  java
  • 采用 web standard 开发时如何设定表格的单元格间距

    答案是仍然使用 HTML 中 table 的 cellspacing 属性。如下:
    <table cellspacing="0">
        ...
    </table>

    除此之外理论上在 CSS2 中,可以设定下列两个样式的组合来达到效果。
    1. border-collapse: separate; (独立边框,不合并)
    2. border-spacing: length || length;

    这里的长度 length 如果指定一个,那么作用于上下左右间隔;如果指定两个,第一个指横向间距,第二个指纵向间距。
    border-spacing 必须在 border-collapse 样式设置为 separate 的时候才起作用。

    但是 border-spacing 属性的支持不好。在 IE6 里也看不到效果,而 Mozilla 可以正常显示。所以处理间距最好的方式还是使用 <table cellspacing=".."> 这种写法。

    下列文档可分别加载到 Mozilla 和 IE 中测试效果:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd"
    >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="Roger Chen">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <style type="text/css">
    #board 
    {border-collapse: separate; border: 1px solid green; border-spacing: 10px 40px;}
    #board td 
    {border: 1px solid black; padding: 0.5em;}
    </style>
    </head>
    <body>
    <table id="board">
        
    <tr>
            
    <td>1</td>
            
    <td>2</td>
        
    </tr>
    </table>
    </body>
    </html>

    IE 中的效果:
    Mozilla 中的效果:
  • 相关阅读:
    5.7
    人月神话阅读笔记1
    python汉诺塔问题的递归理解
    用python进行有进度条的圆周率计算
    使用Python+turtle绘制同心圆
    less.modifyVars方法切换主题样例
    npm简单插件开发流程
    Mac中执行yarn global add @vue/cli 成功后,执行vue --version 提示zsh: command not found: vue 解决方法
    执行yarn deploy打包,报内存溢出的错误解决办法
    为首屏增加加载动画
  • 原文地址:https://www.cnblogs.com/RChen/p/110259.html
Copyright © 2011-2022 走看看