css——table: thead固定,tbody高度固定超出滚动
参考:https://www.cnblogs.com/chaoyueqi/p/9174297.html
效果:
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style> table.table-wrapper { table-layout: fixed; width: 100%; border:1px solid gray; font-size:20px; text-align:left; } table.table-wrapper thead{ background:#eee; } table.table-wrapper tbody { display: inline-block; width: 100%; overflow: auto; max-height: 100px; } table.table-wrapper tr { display: flex; width: 100%; } table.table-wrapper td, table.table-wrapper th { display: inline-block; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }</style> </head> <body> <table class="table-wrapper"> <thead> <tr> <th>商品名称</th> <th>商品数量</th> <th>商品价格</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td>1</td> <td>1</td> </tr> <tr> <td>商品2</td> <td>2</td> <td>2</td> </tr> <tr> <td>商品3</td> <td>3</td> <td>3</td> </tr> <tr> <td>商品4</td> <td>4</td> <td>4</td> </tr> <tr> <td>商品5</td> <td>5</td> <td>5</td> </tr> <tr> <td>商品6</td> <td>6</td> <td>6</td> </tr> </tbody> </table> </body> </html>