<!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;
width: 500px;
height: 300px;
overflow: auto;
/*background-color: #ff1d5e;*/
}
#table {
width: 100%;
}
.col {
width: 20%;
}
.col2 {
width: 30%;
}
</style>
</head>
<body>
<div class="table-container">
<table id="table" border="1" >
<tr>
<th class="col1">Month</th>
<th class="col2">Savings</th>
<th class="col1">Savings</th>
<th class="col2">Savings</th>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
<tr>
<td class="col">January</td>
<td class="co2">January</td>
<td class="col">January</td>
<td class="co2">January</td>
</tr>
</table>
</div>
</body>
</html>
分析：
- 主要是用一個div來包裹著table胖缤，div來控制想要的高度和寬度
- 表格的寬度為100%，即外層div的寬度
- div里加個overflow: auto;屬性來限制超出內(nèi)容滾動條
- 當表格數(shù)據(jù)過多，這時表格的寬度等于div的寬度減去滾動條的寬度议泵，每一個td依舊是表格寬度的比例傻粘，所以不會換行琅锻。
效果如圖
