如果列的文本溢出,我想向该列添加一个水平滚动条。我不想增加列宽。我使用了 nowrap 文本,但也想为其添加水平滚动条。如果文本没有溢出,则滚动条将被隐藏。这是我的代码。现在这个滚动条适用于整个列而不是任何特定列。对于这种情况,我必须使用 JS,但我不确定如何正确使用它。
HTML:
<table class="table">
<thead>
<tr>
<th>Serial</th>
<th>Name of the Project</th>
<th>Name of the Clients</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Column content</td>
<td class="tHor">
Name 1 Name 2
Name 1 Name 2
Name 1 Name 2
Name 1 Name 2
</td>
</tr>
<tr>
<td>3</td>
<td>Column content</td>
<td class="tHor"> Name 1 Name 2</td>
</tr>
</tbody>
</table>
CSS:
.tHor{
overflow-x: auto;
white-space: nowrap;
}
如果这段代码中的文本增加,我希望这个“tHor”类有一个滚动条,第一行的列将显示该条,但对于第二行,必须隐藏水平滚动条的列。
最佳答案
您不需要 JavaScript 来实现它。只需设置 max-width
属性:
.tHor{
overflow-x: auto;
white-space: nowrap;
max-width: 200px;
}
<table class="table">
<thead>
<tr>
<th>Serial</th>
<th>Name of the Project</th>
<th>Name of the Clients</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Column content</td>
<td class="tHor">
Name 1 Name 2
Name 1 Name 2
Name 1 Name 2
Name 1 Name 2
</td>
</tr>
<tr>
<td>3</td>
<td>Column content</td>
<td class="tHor"> Name 1 Name 2</td>
</tr>
</tbody>
</table>
关于javascript - 如果文本溢出,如何在列中添加水平滚动条,否则它将被隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51054507/