在没有 JS 的情况下调整溢出 div 内的表格大小
Posted
技术标签:
【中文标题】在没有 JS 的情况下调整溢出 div 内的表格大小【英文标题】：Resize table inside overflowing divs without JS 【发布时间】：2018-04-28 19:27:49 【问题描述】：当所有列的宽度比包含表格的 div 像素多时，是否可以调整可滚动表格中的列大小。问题是我有 20 列之类的东西，我需要让我的表格可以滚动，并且可以调整列的大小。我使用 JS mousemove、mouseup 和 mousedown 事件成功地做到了，但我试图用 CSS 来做到这一点，它将花费用户更少的资源。示例如下：
<div style="overflow-x:scroll;overflow-y:scroll;max-height:300px;max-width:500px;background-color:gray;">
<table>
<thead>
<tr>
<th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
<th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
<th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
<th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
<th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
<th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th>
</tr>
</thead>
<tbody>
<tr>
<td>TESTTESTESTESTESTSTETSET</td>
<td>TESTTESTESTESTESTSTETSET</td>
<td>TESTTESTESTESTESTSTETSET</td>
<td>TESTTESTESTESTESTSTETSET</td>
<td>TESTTESTESTESTESTSTETSET</td>
<td>TESTTESTESTESTESTSTETSET</td>
</tr>
</tbody>
</table>
</div>
【问题讨论】：
【参考方案1】：如果这是您要查找的内容，请检查此代码：
<!DOCTYPE html>
<html>
<head>
<style>
table
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
th, td
text-align: left;
padding: 8px;
tr:nth-child(even)background-color: #f2f2f2
</style>
</head>
<body>
<h2>Table which can scroll and column will automatically resize</h2>
<div style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>hello</td>
<td>bye</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Abc</td>
<td>xyz</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Arun</td>
<td>Kumar</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>【讨论】：
我做到了！可调整大小列的代码：<th> <div style="resize:horizontal;overflow: auto;">TESTTESTESTEST</div></th>
太好了！如果您发现执行上述代码有任何困难，请发布。以上是关于在没有 JS 的情况下调整溢出 div 内的表格大小的主要内容，如果未能解决你的问题，请参考以下文章