zoukankan      html  css  js  c++  java
  • table表格打印样式

    Html中table的属性:

    border= “1”:给整个表格(包括表格及每一个单元格)加上1像素的黑色边框,

    其等同于css中的: table,table tr th, table tr td { border:1px solid #0094ff; }

    cellpadding=“0”:单元格边距等于0,其默认值为1px,

    其等同于css中的:{padding:0;}

    cellspacing="0":单元格间距等于0,其默认值为2px,

    其等同于css中的:border-collapse: collapse(边框合并),但又不完全相同,cellspacing仅间距,而border-collapse使临近的边线合并成一条边线,也就避免了cellspacing中边线重合造成边线加粗的问题。所以在这里不提倡使用html属性设置表格边框时将cellspacing设置为0,,如果你希望他等于0,更提倡使用css样式属性的方法去设置表格的边框,并使用border-collapse: collapse去合并边线,而不是将cellspacing设置为0,造成重合边线加粗的问题。

    总结来说,给表格加边框,有两种方式:

    1、Html属性,行内加,边框默认为黑色

    复制代码
    <table border="1" cellpadding="2" cellspacing="0" >
            <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
            <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
            <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
            <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        </table>
    复制代码

    如图:,这里就可以看到我刚才所说的重合边线加粗的问题,而下面的方式就明显不会这样了

    2、Css样式,可以自定义你喜欢的颜色,大小,样式:

    复制代码
     <style>
            table,table tr th, table tr td { border:1px solid #0094ff; }
            table {  200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse; padding:2px;}   
        </style>
    
        <table >
            <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
            <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
            <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
            <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        </table>
    复制代码

    如图:

  • 相关阅读:
    linux 复 带进度条
    frp配置
    zookeeper_service 出错 java.lang.NoClassDefFoundError: org/I0Itec/zkclient/exception/ZkNoNodeException
    zookeeper_service 出错 ........... are only available on JDK 1.5 and higher
    推荐eclipse插件Properties Editor
    使用ab对nginx进行压力测试
    Linux搭建Snmp服务
    第一个python程序
    如何执行Python代码
    pycharm 的调试模式 MAC版
  • 原文地址:https://www.cnblogs.com/webwangjie/p/10910839.html
Copyright © 2011-2022 走看看