怎么用css设置table宽度自动伸缩
1：需求是根据获取内容多少自动伸缩table宽度，禁止所有tr浮动的元素触碰到table边框就自动换行，不能给table设置固定宽度，要自动伸缩的。
2：多个tr浮动横排触碰到table边框后
禁止其他浮动tr元素向下挤(换行)，触碰到
边框后的tr元素隐藏滚动显示即可。
3：只要以上两点实现其中一点即可【也就是把所有浮动的tr元素排成一行，浮动的tr元素宽度总和大于table宽度时，隐藏滚动显示，但一定不能换行显示】。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<style>
#label{
width: 10%;
overflow: scroll;
float: left;
}
#content{
width: 90%;
overflow: scroll;
float: left;
background:#858;
}
.table1{
display: block;
width: 100%;
}
.table2{
display: block;
width: 365%;
/** 需求是根据获取到多少tr元素自动伸缩table宽度，
禁止tr单元格自动换行
不是给table设置固定宽度，**/
/**或多个tr浮动横排触碰到table边框时
禁止其他浮动tr元素向下挤(换行)，触碰到
边框后的tr元素隐藏滚动显示，**/
/**也就是把所有浮动的tr元素排成一行，
浮动的tr元素宽度总和大于table宽度时，隐藏滚动
显示就可以了，一定不能换行显示**/
}
thead{
display: block;
float: left;
/** 原width1:90px;**/
width: 10%;
}
tbody{
display: block;
float: left;
}
th{
display: block;
border: 1px black solid;
}
td{
display: block;
border: 1px black solid;
}
tr{
display: block;
float: left;
}
</style>
</head>
<body>
<div id='label'>
<table class="table1">
<thead>
<th>机构号</th>
<th>名称</th>
<th>电话号码</th>
<th>负责人</th>
<th>负责人电话</th>
<th>地址</th>
<th>附近车站</th>
</thead>
</table>
</div>
<div id="content">
<table class="table2">
<tbody>
<tr>
<td>0001</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0002</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0003</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0004</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0005</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0006</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0007</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0008</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0009</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
<tr>
<td>0010</td>
<td>总行营业部</td>
<td>88888888</td>
<td>John</td>
<td>18688888888</td>
<td>长江中路103号</td>
<td>长江中路东口</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
要的是这样的效果
