html - 如何在里面制作可滚动的div?
问题描述
我有这个嵌套表。在其中一个<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 内。(顺便说一句 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>
我希望这有帮助 :)
推荐阅读
- r - 通过 R 使用保留字用 SQL 查询数据库
- jquery - 使用jquery获取textarea中特定行的字符串
- html - 如何使 SVG 使用其父 div 动态缩放?
- python - 以 dict 作为参数调用函数
- opentbs - TinyButStrong 给出了一个损坏的 DOCX 文件
- c# - 使用 RegEx MVC 删除一些 HTML 标签
- r - 日期格式为“01.01.2009 08:00:00, 01.01.2009 9:00:00, ...”的子集数据
- python - 如何在 Flasksqlachemy 中同时插入父表和子表?
- python - 如何在 python 中使用 selenium webdriver 滚动网页(侧边栏)?
- c++ - 如何告诉介子在哪些目录中查找依赖项?