怎么用css设置table宽度自动伸缩
怎么用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>
要的是这样的效果
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7659579
- 以下回答由chatgpt基于相关博客总结生成:
解决方案：
为了让Table的宽度根据内容自动伸缩，可以将Table的宽度设置为auto，同时设置表格的布局方式为table-layout: fixed，这样表格的宽度会根据内容自动调整。
禁止所有浮动元素触碰table边框自动换行，可以设置Table的overflow属性为hidden，同时将其中的浮动元素设置为display: inline-block，这样它们将被视为行内元素，但可以设置宽度和高度，不会自动换行。
当宽度总和大于Table宽度时隐藏滚动显示，可以将Table放在一个固定宽度的div容器中，将div容器的overflow属性设置为auto即可。如果所有浮动的行排成一行，可以设置它们的宽度为百分比，并且总和不能大于100%。
代码实现如下：
<div style="width: 500px; overflow: auto;"> <table style="width: auto; table-layout: fixed; overflow: hidden;"> <tr> <td style="width: 25%; display: inline-block;">第一列</td> <td style="width: 25%; display: inline-block;">第二列</td> <td style="width: 25%; display: inline-block;">第三列</td> <td style="width: 25%; display: inline-block;">第四列</td> </tr> <tr> <td style="width: 25%; display: inline-block;">1</td> <td style="width: 25%; display: inline-block;">2</td> <td style="width: 25%; display: inline-block;">3</td> <td style="width: 25%; display: inline-block;">4</td> </tr> <tr> <td style="width: 25%; display: inline-block;">11</td> <td style="width: 25%; display: inline-block;">22</td> <td style="width: 25%; display: inline-block;">33</td> <td style="width: 25%; display: inline-block;">44</td> </tr> <!-- 添加更多行 --> </table> </div>这样就可以实现Table的宽度根据内容自动伸缩，并且禁止所有浮动元素触碰table边框自动换行的效果，同时当宽度总和大于Table宽度时隐藏滚动显示。
.table2{
display: block;
width: auto; /**这里设置自动伸缩没有效果，依然会自动下挤（换行）显示**/
table-layout:fixed; /**表格样式设置依然会自动下挤（换行）显示，在tr和td试过同样没有反应**/