zoukankan      html  css  js  c++  java
  • HTML小技巧将table边框改为细线

    HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的。因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效,而且兼容所有浏览器。

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

    HTML:

    <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;}
  • 相关阅读:
    C++11中右值引用和移动语义
    面试题3:自己实现单链表
    C++中指针和引用、数组之间的区别
    C++中对象模型
    C++中虚函数的动态绑定和多态性
    C++11中多线程库
    C++中友元
    C++中迭代器原理、失效和简单实现
    C++11中智能指针的原理、使用、实现
    C++中模板与泛型编程
  • 原文地址:https://www.cnblogs.com/binaryworms/p/1695339.html
Copyright © 2011-2022 走看看