• 技术文章 >web前端 >css教程

    为何table中border-spacing: 10px;不起作用啊?

    黄舟黄舟2017-06-30 10:03:32原创1885
    我用样式表:table { border-collapse: separate; border-spacing: 10px; border:1px solid #000000; } ,想让表格单元格分离,可是为什么设置的border-spacing不起作用呢?请指教一下吧

    我就是想用CSS实现如下这种效果,可是border-spacing: 10px; 不起作用

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    
    <body>
    <table width="400" border="1" cellpadding="0" cellspacing="4" bordercolor="#000000">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>

    我就是想用CSS实现如上这种效果,不知道用CSS怎样才能实现在HTML设置的cellspacing="4" 效果,我试了border-spacing: 10px; 不起作用;请各位多多指教

    ie+ff

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <style type="text/css">
    table.tt{border-spacing:10px;}
    </style>
    <!--[if IE]>
    <style type="text/css">
    table.tt{sheneyan:expression(this.cellSpacing="10");}
    </style>
    <![endif]-->
    </head>
    
    <body>
    <table width="400" border="1" cellpadding="0" bordercolor="#000000" class="tt">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    </body>
    </html>

    不支持
    但是为什么要放弃table这么好的自带功能。
    用css来复杂化table。。

    以上就是为何table中border-spacing: 10px;不起作用啊?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:border-spacing table 10px
    上一篇:css :border-spacing属性在 IE6 IE7 IE8(Q) 不支持 下一篇:CSS表格中的border-spacing与border的详解
    PHP编程就业班

    相关文章推荐

    • 聊聊使用CSS怎么实现毛玻璃特效(兼容方案探究)• 分享10个纯 CSS 实现的 Loading 效果• css3链接怎么设置为没有手的样式• 2022年你值得了解的几个CSS新特性(收藏学习)• 如何利用CSS来美化滑动输入条?自定义样式方法浅析

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网