• table完美css样式,table的基本样式,table样式


    table完美css样式,table的基本样式,table样式

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    蕃薯耀 2016年6月15日 09:04:26 星期三

    http://fanshuyao.iteye.com/

    一、table的css样式

    边框线不会重复叠加,不会有些粗有些细,全部统一。

    /*table start*/
    table.default-table{
    	/* -moz-border-radius: 5px;
    	-webkit-border-radius:5px;
    	border-radius:5px; */
    	 100%;
    	border:solid #333; 
    	border-1px 0px 0px 1px;
    	font-size: #333;
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    table.default-table tbody tr{
    	height: 20px;
    	line-height: 20px;
    }
    table.default-table tbody tr.odd{
    	background-color: #fff;
    }
    table.default-table tbody tr.even{
    	background-color: #F5F5F5;
    }
    table.default-table tbody tr:hover{
    	background-color: #eee;
    }
    table.default-table tbody tr th,table.default-table tbody tr td{
    	padding:3px 5px;
    	text-align: left;
    	/* border: 1px solid #ddd; */
    	border:solid #333; 
    	border-0px 1px 1px 0px; 
    }
    table.default-table tbody tr th{
    	font-weight: bold;
    	text-align: center;
    }
    
    table.default-table tbody tr td.tac{
    	text-align: center;
    }
    table.default-table tbody tr td a:hover{
    	color:#0080c0;
    }
    /*table end*/

    二、使用方法

    <table class="default-table">
        	<tr>
        		<th>序号</th>
        		<th>产品名称</th>
        		<th>规格</th>
        		<th>数量</th>
        		<th>单位</th>
        	</tr>
        	<tr>
                    <td class="tac">1</td>
                    <td>这是标题这是标题这是标题这是标题这是标题这是标题</td>
    	    	<td class="tac">AAA</td>
                    <td class="tac">6</td>
                    <td class="tac">个</td>
        	</tr>
        	</c:forEach>
        </table>

    三、Demo展示



     

    >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

    蕃薯耀 2016年6月15日 09:04:26 星期三

    http://fanshuyao.iteye.com/

  • 相关阅读:
    ($children,$refs,$parent)的使用
    watch监听变化
    vue组件间通信六种方式(完整版)
    CSS水平垂直居中常见方法总结2
    CSS水平垂直居中常见方法总结
    Uncaught SyntaxError: Unexpected identifier 报错 import Vue from 'vue';
    前端跳槽面试必备
    防止重复发送Ajax请求问题
    JQuery中的$().each 以及 $.each的区别
    数组中的forEach和map的区别
  • 原文地址:https://www.cnblogs.com/fanshuyao/p/6227121.html
走看看 - 开发者的网上家园