我有这个嵌套表格。在其中一个 <td>
我想要一个可滚动的 div。
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:800px;overflow-x:scroll;'>This DIV should have a large width</div></td>
</tr>
</tbody>
</table>
当我插入 800px
时作为 div
宽度,它显示正确。但是,如果我插入 1000px
显示输出坏了。理想情况下,我最多需要 5000px
++。
最佳答案
我不确定这是否是您想要的。这将始终保持您请求的 5000+px 宽度,同时在一个较小的可滚动 div 中。 (btw overflow-x: auto; 意味着它只会在内容实际溢出时显示滚动条,而不是一直显示)
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:800px;overflow-x:auto;'>
<div style='width:5000px;'>This DIV should have a large width</div>
</div></td>
</tr>
</tbody>
</table>
希望对您有所帮助:)
关于html - 如何在 <td> 中制作可滚动的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52551432/