随着浏览器窗口缩小表格出现横向滚动条

<style>
        table{
            width: 100%;
            border-collapse: collapse;
            border: saddlebrown 1px solid;
        }
        tr,td,th{
            border: saddlebrown 1px solid;
            text-align: center;
            vertical-align: middle;
            padding: 10px;
        } 
　　　　/*在标题很长时不会串到下一行使单元格变高*/
        th{ 
            white-space: nowrap;
            overflow: hidden;
        }
        div{
            width: 100%;
            overflow-x: auto; 
        }
</style>
<div>
        <table>
            <thead>
                <tr>
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                    <th>标题四</th>
                    <th>标题五</th>
                    <th>标题六</th>
                    <th>标题七</th>
                    <th>标题八</th>
                    <th>标题九</th>
                    <th>标题十</th>
                    <th>标题十一</th>
                    <th>标题十二</th>
                    <th>标题十三、标题十三、标题十三、</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
            </tbody>
      </table>
</div>

 

转载于:https://www.cnblogs.com/kunmomo/p/9935183.html