延伸到屏幕外的 HTML 表格答案

【问题标题】：Html table extending off the screen延伸到屏幕外的 HTML 表格
【发布时间】：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>

【问题讨论】：

如果您还有其他问题，请开新帖。

标签： html html-table width

【解决方案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;">

【讨论】：