如何实现 table 中单元格有最大宽度并且可以换行，外面加带一个大小固定的带滚动条的div。
我需要做一个带滚动条的列表，
我想用一个table外面包一层带滚动条的div实现,
问题是如果把div设置成带滚动条的话。div包含的 table 的列宽就会被按div的宽度平均分配而不会出现横向的滚动条。一直无法解决所以求救csdn。希望大家给个答案。谢谢。
下面贴出了代码。目前画面是这样的。
我想做成下面这个样子
以下是目前我写的代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>设置表格有滚动条</title>
<style>
.ell21 {
max-width: 100px;
max-height: 80px;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
text-align: left;
vertical-align: top;
}
</style>
</head>
<body>
<!--<div style=" border: 1px solid #000000; overflow: scroll; white-space: initial; width: 310px; ">-->
<div style="width:320px; height:200px; overflow:scroll;">
<table border="1" style="table-layout:fixed; ">
<tr style="max-height:50px;height:50px">
<td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴</td>
<td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴2阿里巴巴阿里巴巴2阿里巴巴阿里巴巴2</td>
<td style="max-width: 100px; max-height:50px; word-break: break-all; ">阿里巴巴阿里巴巴3</td>
<td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴4</td>
</tr>
<tr style="max-height:50px; height:50px">
<td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴aa</td>
<td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
<td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴3</td>
<td style="max-width: 100px; max-height:50px; word-break: break-all;">阿里巴巴阿里巴巴4</td>
</tr>
</table>
</div>
<br>
<div style="border: 1px solid #000000; width: 300px; height: 50px;">
<p>width: 300px; height: 50px</p>
</div>
<br>
<div style="border: 1px solid #000000; width: 100px; height: 50px;">
<table>
<tr>
<td style="width:100px;">width: 100px height: 50px</td>
</tr>
</table>
</div>
</body>
</html>
我实现了这个功能，在script中计算表格的显示宽度，外面加一层div，宽度设置成表的宽度，外面再包一层有滚动条的 div.这个方法需要从里面的控件开始一层一层设置外层控件的宽度，都是在 script里设置的值，做法不太灵活 。 还有更好的实现方法吗？
<!DOCTYPE HTML>
<html>
<head>
<style>
.ell21 {
max-width: 100px;
max-height: 80px;
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
text-align: left;
vertical-align: top;
}
</style>
<script type="text/javascript">
window.onload = function() {
var wid = document.getElementById("mytable").clientWidth;
// 1 是滚动条所占用宽度，需要根据情况设置一下
document.getElementById("mydiv").style.width = document.getElementById("mytable").clientWidth + 1 + 'px';
document.getElementById("outdiv").style.width = '320px';
document.getElementById("outdiv").style.height = '200px';
}
</script>
</head>
<body>
<!-- <div style="overflow: scroll; width: 320px; height: 200px;"> -->
<div id="outdiv" style="overflow: scroll; ">
<div id="mydiv" style="">
<table id="mytable" border="1">
<tr>
<td style="max-width: 100px; word-break: break-all;">阿里11</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
</tr>
<tr>
<td style="max-width: 100px; word-break: break-all;">阿里11</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴阿里巴巴阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
</tr>
<tr>
<td style="max-width: 100px; word-break: break-all;">阿里11</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴阿里巴巴阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
</tr>
<tr>
<td style="max-width: 100px; word-break: break-all;">阿里11</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
</tr>
<tr>
<td style="max-width: 100px; word-break: break-all;">阿里11</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴阿里巴巴阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿阿里巴巴</td>
<td style="max-width: 100px; word-break: break-all;">阿里巴巴阿里巴巴2</td>
</tr>
</table>
</div>
</div>
<br>
<div style="border: 1px solid #000000; width: 300px; height: 50px;">
<p>width: 300px; height: 50px</p>
</div>
<br>
<div style="border: 1px solid #000000; width: 100px; height: 50px;">
<table>
<tr>
<td style="width:100px;">width: 100px height: 50px</td>
</tr>
</table>
</div>
</body>
</html>