<!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 =" the display: -webkit-Flex; the display: -ms-of flexbox; ">
<TD class =" ELL2 "> Ali Baba. 1 </ TD>
<TD class =" ELL2 "> Alibaba Baba 2 </ TD>
<TD class = "ELL2"> Alibaba Baba. 3 </ TD>
<TD class = "ELL2"> Alibaba Baba. 4 </ TD>
</ TR>
<TR style = "the display : -webkit-Flex; the display: -ms-of flexbox ">
<TD class =" ELL2 "> Baba Ali Baba </ TD>
<TD class =" ELL2 ">Alibaba Baba 2 </ TD>
<TD class = "ELL2"> Alibaba Baba. 3 </ TD>
<TD class = "ELL2"> Alibaba Baba. 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>