<!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 () { //当浏览器大小变化时
myTable()
});
function myTable() {
var $header = $('#tableHeader')
var $content = $('#tableContent')
$content.show()
$header.show()
$header.css('width', Number($content[0].scrollWidth))
}
</script>
</html>
分析：
- 要把表头和内容分开，这样才能做到固定表头，滚动条只作用于内容。
- 通过计算把内容除去滚动条的宽度
scrollWidth，赋值给表头的宽度，保持一致。- 因为表头的宽度是从默认宽度再变化为与内容相等，这个过程页面会闪动，为了更好的用户体验，通过
css的display属性先把表头和内容隐藏，再通过jq的show()显示出来。
网友评论