好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css实现的美观的table细线表格代码实例_html/css_WEB-ITnose

css实现的美观的table细线表格代码实例:
默认状态下的表格边框是十分的丑陋的,如果直接应用与客户的网站,那反响是可想而知的。
下面是一段非常美观的细线表格代码实例和大家分享一下。
代码如下:

      蚂蚁部落  .table{   width:100%;   padding:0px;   margin:0px;   font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体;   border-left:1px solid #ADD8E6;   border-collapse:collapse; } /*表头样式。*/ .table th{   font-size:12px;   font-weight:600;   color:#303030;   border-right:1px solid #ADD8E6;   border-bottom:1px solid #ADD8E6;   border-top:1px solid #ADD8E6;   letter-spacing:2px;   text-align:left;   padding:10px 0px 10px 0px;   white-space:nowrap;   text-align:center;   overflow: hidden; } .table td {   border-right:1px solid #ADD8E6;   border-bottom:1px solid #ADD8E6;   background:#fff;   font-size:12px;   padding:3px 3px 3px 6px;   color:#303030;   word-break:break-all;   word-wrap:break-word;   white-space:normal; }                    蚂蚁部落一        蚂蚁部落二                 javascript教程      jQuery教程            HTML教程      div css教程        

上面的代码实现了细线表格效果,代码非常的简单这里就不介绍了,并且使用也非常的遍历,只要给响应的表格添加class="table"即可实现,当然此效果也不是万能的,需要根据实际要求进行一些设置才行。

原文地址是:http://www.softwhy.com/divcss/

查看更多关于css实现的美观的table细线表格代码实例_html/css_WEB-ITnose的详细内容...

  阅读:33次