Référence: https://www.cnblogs.com/chaoyueqi/p/9174297.html
effet:
html:
<DOCTYPE html!> <Html> <head> <meta charset = "UTF-8"> <title> demo </ title> <style> table.Table - emballage { tableau - mise en page: fixe; largeur: 100% ; border: 1px solide gris; police - taille: 20px; texte - align: left; } Table.Table - emballage thead { fond: #EEE; } Table.Table - display: inline - bloc; largeur: 100% ; overflow: auto; max - hauteur: 100px; } Table.Table - emballage tr { display: flex; largeur: 100% ; } Table.Table - emballage td, table.Table - emballage th { display: inline - bloc; flex: 1 ; blanc -espace: nowrap; débordement caché; texte - 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>商品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>