我们将使用 overflow-y 属性设置垂直滚动 -
overflow-y: auto;
我们将使用 overflow-x 属性隐藏水平滚动 -
overflow-x: hidden;
例
让我们看一个例子 -
<！DOCTYPE html> <html> <head> <title> 带有垂直滚动条的显示表格 </title> <样式> 表.向下滚动 { 宽度： 100%; 边框间距：0; 边框：1px 纯黑色; } table.scrolldown tbody， table.scrolldown thead { 显示：块; } thead tr th { 高度：60像素; 行高：60px; 背景：红色; 颜色：白色; } table.scrolldown tbody { 高度：120px; 溢出-y：自动; 溢出-x：隐藏; } tbody { 上边框：2px 纯黑色; 背景：橙色; } tbody TD， thead th { 宽度 ： 200px; 右边框：1px 纯黑色; } 道明 { 文本对齐：居中; } </style> </head> <body> <h1>排名</h1> <p>（表格中的垂直滚动）</p> <table class=“scrolldown”> <thead> <tr> <th>Player</th> <th >Country</th > <th>Rank</th> <th>Points</th> </tr> < /thead> <tbody> <tr> <td>Virat</td> <td>IND</td> <td>1</td> <td>90</TD> </TR> <tr> <td>D**id</TD> <td>AUS</TD> <TD>2</吨> <道>80</道></><><道明>史蒂夫</道明> <道>澳元</道> <道>3</道> <道>70</道> </TR > <tr> <td>Rohit</td> <td>IND</TD> <td>4</td> <TD>60</道> </> <三> <道>本</道> <>英</道> <td>5</td> <td>55</td> </tr> <tr> <td>Rashid</td> <道>AFG</td> <td>6</td> <td>50</td> </tr> <tr> <td>波拉德</TD> <td>WI</td> <td>7</td> <td>40</td> </tr > </tbody> </table> </body> </html>
输出
