返回
点击预览
格式化代码
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; white-space:nowrap; padding:8px 20px; } tr:nth-child(even) { background-color: #f2f2f2; } </style> </head> <body> <h2>能响应的表格</h2> <p> 如果屏幕太小，无法显示全部内容，响应表将显示水平滚动条。调整浏览器窗口的大小以查看效果： </p> <p> 若要创建响应表，请在table元素外添加一个容器元素(如div)，该容器元素具有<strong>overflow-x:auto</strong>： </p> <div style="overflow-x:auto;"> <table> <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> </tr> <tr> <td>王</td> <td>小明</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>刘</td> <td>小明</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>张</td> <td>小明</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> </table> </div> </body> </html>
评论区
发表
{{item['qq_nickname']}}
(
)
回复
回复
发表
21技术
www.21xrx.com
备案号：
蜀ICP备17043188号-2
评论区