宽度为 100% 的 HTML 表格,正文内有垂直滚动

我们将使用 overflow-y 属性设置垂直滚动 - overflow-y: auto; 我们将使用 overflow-x 属性隐藏水平滚动 - overflow-x: hidden; 例 让我们看一个例子 - <!DOCTYPE html> <html> <head> <title> 带有垂直滚动条的显示表格 </title> <样式&g...

我们将使用 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>

输出

#宽度 #表格 #正文 #垂直 #滚动

评论0

首页 导航 会员 客服