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

CSSBlog 
精美的表格是前端开发用到的一个组件，很多时候我们利用复杂的页面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. }  


文章地址：http://javapub.iteye.com/blog/733910