<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>
随着浏览器窗口缩小表格出现横向滚动条
猜你喜欢
转载自www.cnblogs.com/kunmomo/p/9935183.html
今日推荐
周排行