利用CSS生成精美细线Table表格

精美的表格是前端开发用到的一个组件，很多时候我们利用复杂的页面style代码，来生成这样的表格，造成了页面的修改性和可读性都非常差。这里推荐直接使用css来产生一个细线表格。 
使用方法也很简单： 
第一：导入table.css 

Java代码  收藏代码
  1. <link rel="stylesheet" type="text/css" href="./css/table.css"/>  


第二：套用格式 

Java代码  收藏代码
  1. <table class="table">  


您只需要给table设置样式class="table"即可，不需要对任何的tr，td做操作。您也可以写成<table class="table" style="width:600px"> style="width:600px"是为了更灵活的控制表格的宽度，如果直接写到table.css里自然也没有问题；如果您打算让td有有背景颜色，只需要设置td的样式class="color"即可。当然其实可以在css里面利用表达式直接设置成隔行变色，不过那样做会降低页面的效率，不推荐在css中使用表达式。 

如果大家想对样式进行微调，只需要调整table.css即可，不需要改任何的页面html代码。如果大家想修改边框的颜色，请在table.css中找到色值：#ADD8E6，然后全部替换成自己想要的色值即可。附件是一个具体的例子。 

table.css源码： 

Java代码  收藏代码
    1. /*表格样式。*/  
    2. .table {  
    3.     width:100%;  
    4.     padding: 0px;  
    5.     margin: 0px;  
    6.     font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体;  
    7.     border-left:1px solid #ADD8E6;  
    8.     border-collapse:collapse;  
    9. }  
    10.   
    11. /*表头样式。*/  
    12. .table th {  
    13.     font-size:12px;  
    14.     font-weight:600;  
    15.     color: #303030;  
    16.     border-right: 1px solid #ADD8E6;  
    17.     border-bottom: 1px solid #ADD8E6;  
    18.     border-top: 1px solid #ADD8E6;  
    19.     letter-spacing: 2px;  
    20.     text-align: left;  
    21.     padding: 10px 0px 10px 0px;  
    22.     background: url(../images/tablehdbg.png);  
    23.     white-space:nowrap;  
    24.     text-align:center;  
    25.     overflow: hidden;  
    26. }  
    27.   
    28. /*单元格样式。*/  
    29. .table td {  
    30.     border-right: 1px solid #ADD8E6;  
    31.     border-bottom: 1px solid #ADD8E6;  
    32.     background: #fff;  
    33.     font-size:12px;  
    34.     padding: 3px 3px 3px 6px;  
    35.     color: #303030;  
    36.     word-break:break-all;  
    37.     word-wrap:break-word;  
    38.     white-space:normal;  
    39. }  
    40.   
    41. /*蓝色单元格样式，主要用于隔行变色。*/  
    42. .table td.color{  
    43.     background:#edf7f9;  
    44. }  
    45.   
    46. /*表格中超级链接样式。*/  
    47. .table td a:link{  
    48.     font-weight:400 ;  
    49.     color:#2259D7 ;  
    50.     text-decoration:none  ;  
    51.     word-break:break-all;  
    52.     word-wrap:break-word;  
    53.     white-space:normal;  
    54. }  
    55.   
    56. .table td a:visited {  
    57.     font-weight:400 ;  
    58.     color:#2259D7 ;  
    59.     text-decoration:none  ;  
    60.     word-break:break-all;  
    61.     word-wrap:break-word;  
    62.     white-space:normal;  
    63. }  
    64.   
    65. .table td a:hover {  
    66.     font-weight:400 ;  
    67.     text-decoration:underline ;  
    68.     color: #303030;  
    69.     word-break:break-all;  
    70.     word-wrap:break-word;  
    71.     white-space:normal;  
    72. }  
    73.   
    74. .table td a:active {  
    75.     font-weight:400 ;  
    76.     text-decoration:none  ;  
    77.     color:#2259D7 ;  
    78.     word-break:break-all;  
    79.     word-wrap:break-word;  
    80.     white-space:normal;  
    81. }  
posted @ 2014-07-23 17:30  super1234  阅读(695)  评论(1)  编辑  收藏  举报