<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
<title>滾動條不換行</title>
<style>
body {
text-align: center;
}
.table-container {
margin-top: 50px;
display: inline-block;
overflow: auto;
width: 50%;
/*background-color: #ff1d5e;*/
}
#tableHeader {
display: none;
width: 100%;
height: 30px;
}
#tableContent {
display: none;
/*width: 500px;*/
height: 100px;
overflow: auto;
}
#tableContent tr {
height: 30px;
}
</style>
</head>
<body>
<div class="table-container">
<div id="tableHeader">
<table border="1" width="100%">
<tr>
<th width="20%">Month</th>
<th width="30%">Savings</th>
<th width="20%">Savings</th>
<th class="col2" width="30%">Savings</th>
</tr>
</table>
</div>
<div id="tableContent">
<table border="1" width="100%">
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
<tr>
<td width="20%">January</td>
<td width="30%">January</td>
<td width="20%">January</td>
<td width="30%">January</td>
</tr>
</table>
</div>
</div>
</body>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
myTable()
});
$(window).resize(function () { //當(dāng)瀏覽器大小變化時
myTable()
});
function myTable() {
var $header = $('#tableHeader')
var $content = $('#tableContent')
$content.show()
$header.show()
$header.css('width', Number($content[0].scrollWidth))
}
</script>
</html>
分析：
- 要把表頭和內(nèi)容分開漩绵，這樣才能做到固定表頭贱案，滾動條只作用于內(nèi)容。
- 通過計算把內(nèi)容除去滾動條的寬度
scrollWidth止吐，賦值給表頭的寬度宝踪，保持一致。- 因為表頭的寬度是從默認(rèn)寬度再變化為與內(nèi)容相等祟印，這個過程頁面會閃動肴沫，為了更好的用戶體驗，通過
css的display屬性先把表頭和內(nèi)容隱藏蕴忆，再通過jq的show()顯示出來颤芬。
