延伸到屏幕外的 HTML 表格
Posted
技术标签:
【中文标题】延伸到屏幕外的 HTML 表格【英文标题】：Html table extending off the screen 【发布时间】：2012-06-22 11:50:36 【问题描述】：我有一个表格，它从屏幕向右延伸（它已固定，并且此宽度大于屏幕宽度）。浏览器会自动在底部创建滚动条。如何指示浏览器在右侧“不可见”区域显示此表格时不创建滚动条？本练习的目的是使用 javascript 向左滚动该表，将其内容显示在最初不在屏幕上的右侧。
如果我为“body”设置“overflow:hidden”，则所有其他内容都将无法滚动，以防它不适合屏幕（例如，在 1024 浏览器中，因为内容已针对 1280 进行了优化）。我只需要这个表（在两个 DIV 内）不创建浏览器滚动条...
代码如下所示
<div style="position:relative;overflow:hidden;width:1500px">
<div style="float:left">
<table style="table-layout:fixed;width:1500px">
<tr>
<td style="width:300px">
aaa
</td>
<td style="width:300px">
bbb
</td>
<td style="width:300px">
ccc
</td>
<td style="width:300px">
ddd
</td>
<td style="width:300px">
eee
</td>
</tr>
</table>
</div>
</div>
【问题讨论】：
如果您还有其他问题，请开新帖。 【参考方案1】：添加以下 CSS 规则：
body
overflow-x:hidden;
编辑：在看到你的 cmets 之后，table 在 div 内，我建议如下。假设您的标记是：
<div class="tablecontainer">
<table />
</div>
使用以下 CSS 规则：
div.tablecontainer
overflow-x:hidden;
【讨论】：
如果我为 设置“overflow:hidden”，如果不适合屏幕（例如在 1024 浏览器中，因为内容已针对 1280 进行了优化），所有其他内容都将无法滚动。我只需要这个表（在两个 DIV 内）不创建浏览器滚动条...【参考方案2】：试试这个
<body style="overflow-x:hidden;">
或使用任何 CSS 类将此属性添加到您的 body 标记中。
【讨论】：
【参考方案3】：为其添加“overflow-x”样式。您可以隐藏溢出或给包含表格的 div 水平滚动。
水平滚动溢出
<div class="col-12" style="overflow-x:scroll;">
隐藏溢出
<div class="col-12" style="overflow-x:hidden;">
【讨论】：
以上是关于延伸到屏幕外的 HTML 表格的主要内容，如果未能解决你的问题，请参考以下文章
Objective C - iOS，在屏幕外的静态表格单元格中遍历 UILabel