芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
4

细线表格的浏览器兼容写法

作者 芒果/分类 代码/发布于 2010-02-20 18:50

细线表格如果单纯设置边框,很难保证浏览器兼容。常见的做法是利用 CSS2 的 “border-collapse:collapse;” 属性合并表格边框;并对 table 元素设置左边框和上边框,对 th 和 td 元素设置右边框和下边框。

Markup:

<table>
    <tr>
        <th>table head (row1, col1)</th>
        <th>table head (row1, col2)</th>
        <th>table head (row1, col3)</th>
    </tr>
    <tr>
        <td>table data (row1, col1)</td>
        <td>table data (row1, col2)</td>
        <td>table data (row1, col3)</td>
    </tr>
    <tr>
        <td>table data (row2, col1)</td>
        <td>table data (row2, col2)</td>
        <td>table data (row2, col3)</td>
    </tr>
</table>

CSS:

table{border-collapse:collapse;border-spacing:0;border-left:1px solid #888;border-top:1px solid #888;background:#efefef;}
th,td{border-right:1px solid #888;border-bottom:1px solid #888;padding:5px 15px;}
th{font-weight:bold;background:#ccc;}
版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/thin-border-table-browser-compatible-writing-method/" title="细线表格的浏览器兼容写法" rel="bookmark">细线表格的浏览器兼容写法 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 4 条群众意见

  1. chozie /2010-07-04 16:28

    天,为何要写这么麻烦呢? 回应

    #1
  2. ?
    香樟树 » css细线表格的浏览器兼容写法 /2010-09-21 15:27

    […]  转载自 细线表格的浏览器兼容写法 | 芒果 Tags: css, css细线表格, 浏览器兼容, […] 回应

    #2
  3. ?
    细线表格的制作 | Wang Jun's Blog /2010-11-30 15:33

    […] http://mangguo.org/thin-border-table-browser-compatible-writing-method/ […] 回应

    #3
  4. ?
    细线表格的浏览器兼容写法 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /2011-05-05 07:39

    […]   转载至:细线表格的浏览器兼容写法 | 芒果小站 分类: css 标签: Css, 美化, 表格 暂无相关日志 评论 (0) Trackbacks (0) 发表评论 Trackback […] 回应

    #4

下面我简单说几句