Reference: https://www.cnblogs.com/chaoyueqi/p/9174297.html
effect:
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>