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>