我有一个表格,其中有四列,第一列是一个嵌套结构,可能有(n)个嵌套和较长的文本长度。我想为表格的第一列添加水平滚动条,以便我可以看到嵌套结构。
我尝试了下面的代码,但无法实现仅对表格的第一列添加水平滚动条。
我需要一个带有仅针对第一列名称的水平滚动条的表格。我已添加了一个样本代码,我已经尝试过了:
我尝试了下面的代码,但无法实现仅对表格的第一列添加水平滚动条。
我需要一个带有仅针对第一列名称的水平滚动条的表格。我已添加了一个样本代码,我已经尝试过了:
.table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid grey;
}
.wrapper {
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 1px;
width: 700px;
}
td, th {
border: 1px solid grey;
}
.indent {
display: inline-block;
width: 35px;
height: 10px;
}
.table tr th:first-child,
.table tr td:first-child {
width: 400px;
}
<!DOCTYPE html>
<html>
<head>
<body>
<div class='wrapper'>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Level 1</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>
<span class="indent"></span>
<span> Level 1.1 </span>
</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>
<span class="indent"> </span>
<span class="indent"> </span>
<span>Sub level 1.1.2</span>
</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>
<span class="indent"> </span>
<span class="indent"> </span>
<span class="indent"> </span>
<span> Sub Level 1.2.3</span></td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>
<span>Level 2 </span></td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>
<span class="indent"> </span>
<span>Level 2.1 </span></td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>
<span class="indent"> </span>
<span class="indent"> </span>
<span>Level 2.1.2 </span></td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>
<span class="indent"> </span>
<span class="indent"> </span>
<span class="indent"> </span>
<span>Level 2.1.3 </span></td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>
<span class="indent"></span>
<span class="indent"></span>
<span class="indent"></span>
<span class="indent"></span>
<span>Level 2.1.4 </span>
</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>