zoukankan      html  css  js  c++  java
  • table最终版IE(浏览器中宽度不起作用)

    tbody{position:absolute;}

    给table_div加边框

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<link rel="stylesheet" type="text/css" href="../main.css"/>
    		<title></title>
    		<style>
    			.main{ 50%;float: left;height: 500px;padding: 10px;}
    			.table_div{ 100%;float: left;overflow: auto;}
    			.table_div>.table_{table-layout:fixed; 100%;height:100%;position: relative;}
    			.table_div>.table_>thead{position: absolute;overflow: hidden;min- 100%;}
    			.table_div>.table_>thead>tr{background-color: #F2F2F2;}
    			.table_div>.table_>tbody{display: block;min-height:10px;position: absolute;}
    			.table_div>.table_>thead ~ tbody{height: calc(100% - 30px);margin-top: 30px;}
    			.table_ tr{display:inline-flex;line-height: 30px;min-100%}
    			.table_ th,.table_ td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:30px;float:left;font-weight: normal;text-align: left;text-indent: 7px;}
    			.table_ th,.table_ td{border-top: 1px solid #E6E6E6;border-left: 1px solid #E6E6E6;}
    			.table_ tbody>tr:last-of-type td{border-bottom: 1px solid #E6E6E6;}
    			.table_ tr th:last-of-type,.table_ tr td:last-of-type{border-right: 1px solid #E6E6E6;}
    			.fenye{ 100%;height: 40px;float: left;background-color: #fff;}
    			.fenye>.fenye_xs{float: left;color: #999;line-height:40px;}
    			.fenye>.fenye_xs>span{color: #999;}
    			.fenye>.fenye_div{float: right;}
    			.fenye>.fenye_div>ul{float: right;border-radius: 5px;overflow: hidden;margin-top:2px}
    			.fenye>.fenye_div>ul>li{color: #999;padding:0 10px;line-height: 30px; float: right;text-align: center;}
    			.fenye>.fenye_div>ul>li:not(:last-of-type){cursor:pointer;}
    			.fenye>.fenye_div>ul>li:not(:last-of-type):hover{color:#3493E5;text-decoration: underline;}
    			.fenye>.fenye_div>ul>li>span{padding: 0 10px;}
    			
    			.table_ th,.table_ td{120px;}
    		
    		</style>
    	</head>
    	<body>
    		<div class="main">
    			<div class="table_div" style="height: calc(100% - 40px);">
    				<table class="table_">
    					<thead>
    						<tr>
    							<th>姓名</th>
    							<th>性别</th>
    							<th>年龄</th>
    							<th>电话</th>
    							<th>微信</th>
    							<th>QQ</th>
    							<th>姓名</th>
    							<th>性别</th>
    							<th>年龄</th>
    							<th>电话</th>
    							<th>微信</th>
    							<th>QQ</th>
    						</tr>
    					</thead>
    					<tbody>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    						<tr>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    							<td>张三</td>
    							<td>男</td>
    							<td>22</td>
    							<td>18698598989</td>
    							<td>nizalaobuxign</td>
    							<td>2442851525</td>
    						</tr>
    					</tbody>
    				</table>
    			</div>
      	        <div class="fenye">
    				<div class="fenye_xs">显示1-10,共<span>170</span>项</div>
    				<div class="fenye_div">
    					<ul>
    						<li>尾页</li>
    						<li>下一页</li>
    						<li>上一页</li>
    						<li>首页</li>
    						<li>第<span>1</span>/<span>10</span>页</li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    

      

  • 相关阅读:
    二叉树【基础算法题】
    大话数据结构笔记——第五章 串
    大话数据结构笔记——第四章 栈与队列
    矩阵【基础算法题】
    大话数据结构笔记——第三章 线性表
    十大经典排序算法(Javascript版)
    比较器
    荷兰国旗问题
    好听的字
    mongodb 命令
  • 原文地址:https://www.cnblogs.com/chenwan1218/p/13061600.html
Copyright © 2011-2022 走看看