解决表格内容因为滚动条导致换行
2019-04-18 本文已影响0人
Lia代码猪崽
<!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;属性来限制超出内容滚动条
- 当表格数据过多，这时表格的宽度等于div的宽度减去滚动条的宽度，每一个td依旧是表格宽度的比例，所以不会换行。
效果如图
