<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>设置表格有滚动条</title>
<style>
.ell2 {
max-width: 100px;
max-height:80px;
word-break: break-all;
word-wrap:break-word;
white-space:pre-wrap;
text-align:left;
vertical-align:top;
border: 1px solid #000;
}
.tableclass {
/* width: 500px;
height: 100px; */
/* white-space: nowrap; */
}
</style>
</head>
<body>
<div style=" border: 1px solid #000000; overflow: auto ; white-space: normal ; width: 310px; height: 200px;">
<table style="white-space: nowrap;table-layout: initial" >
<tr style="display: -webkit-flex;display:-ms-flexbox;" >
<td class="ell2">阿里巴巴1</td>
<td class="ell2">阿里巴巴阿里巴巴2</td>
<td class="ell2">阿里巴巴阿里巴巴3</td>
<td class="ell2">阿里巴巴阿里巴巴4</td>
</tr>
<tr style="display: -webkit-flex;display:-ms-flexbox" >
<td class="ell2">阿里巴巴巴巴</td>
<td class="ell2">阿里巴巴阿里巴巴2</td>
<td class="ell2">阿里巴巴阿里巴巴3</td>
<td class="ell2">阿里巴巴阿里巴巴4</td>
</tr>
</table>
</div>
<!-- </div> -->
<div style="border: 1px solid #000000; width: 300px; height: 50px;">
</div>
<div style="border: 1px solid #000000; width: 100px; height: 50px;">
<table>
<tr>
<td style="width:100px;">Hello World 1 2 3 Hello World 4 5 6 </td>
</tr>
</table>
</div>
</body>
</html>