解决表格内容因为滚动条导致换行

<!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依旧是表格宽度的比例，所以不会换行。

效果如图

解决表格内容因为滚动条导致换行

推荐阅读更多精彩内容