zoukankan      html  css  js  c++  java
  • table数据表 边框特效

    本文针对用table显示数据,主要是table的线条颜色处理。

    1.下面的这个方法,比较试用于单一的table不适用于table 套着table。这样的话在某些浏览器上浏览是有差别的。table套table 有可能会出现线条加粗的情况。

    <style type="text/css">
    TABLE { BORDER-COLLAPSE: collapse }
    #Table1 {
    border: #000000 1px solid;}
    #Table1 td{border: #0092d2 1px solid;
    text-align:center;
    font-size:14px;}
    </style>
    

    <TABLE id="Table1"style="WIDTH: 605px; HEIGHT: 608px" cellSpacing="0" cellPadding="0" width="605" align="center" bgColor="#ffffff" border="1">
    <tr>
    <td width="38" rowspan="2">委<br>
    托<br>
    方</td>
    <td width="90">委托单位</td>
    <td width="185"></td>
    <td width="84">委托人</td>
    <td colspan="2"></td>
    <td width="70">联系电话</td>
    </tr>
    </table>
    

    2.本种方法是设定table的背景颜色,然后在重写td的颜色。设置table的边不为0.用td的颜色一覆盖,所以剩下的就是边框的颜色。

    TABLE id="Table1" style="FONT-SIZE: 13px; WORD-BREAK: break-all; WORD-WRAP: break-word" cellSpacing="1" cellPadding="3" width="692" bgColor="#77b3d4" border="0">
    <tr>
    <td style="WIDTH: 33px" width="33" rowSpan="2">委<br>
    托<br>
    方</td>
    <td width="90">委托单位</td>
    <td width="185"><FONT face="宋体"><asp:label id="Label6" runat="server" Font-Size="13px" DESIGNTIMEDRAGDROP="1647"></asp:label></FONT></td>
    <td width="84">委托人</td>
    <td colSpan="2"><FONT face="宋体"><asp:label id="Label36" runat="server" DESIGNTIMEDRAGDROP="1755"></asp:label></FONT></td>
    <td width="70">联系电话</td>
    </tr>
    </table>
    

     css 如下:

    <style type="text/css">
    #Table1 td{
    background-color:#ffffff;
    }
    </style>
    

     直接设定td的颜色就可以了。

  • 相关阅读:
    Laravel kalnoy/nestedset
    Eloquent Subquery Enhancements in Laravel 6.0
    Laravel 6.0 中更加强劲的子查询
    Es6系列之module and class
    Using Laravel's Bootable Eloquent Traits
    Google Chrome Shortcut Keys
    另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
    docker-machine 创建主机的缺省密码 (Default User and Password)
    eslint Cannot read property 'range' of null错误( Quasar Doc )$ quasar dev 出错
    java比较排序Comparable和Comparator
  • 原文地址:https://www.cnblogs.com/sunShineJing/p/2308914.html
Copyright © 2011-2022 走看看