Question

我有一张桌子，它从屏幕向右延伸（它已固定，并且此宽度大于屏幕宽度）。浏览器会自动在底部创建滚动条。我如何指示浏览器，同时在右侧的“隐形”区域显示此表，而不是创建滚动条？本练习的目的是使用Javascript向左滚动此表，向右显示其内容，该内容最初在屏幕外。

如果我为“正文”设置“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>

Answer 1

添加以下CSS规则：

body
{
  overflow-x:hidden;
}

编辑：看到您的评论后，table在div范围内，我建议如下。让我们说你的标记是：

<div class="tablecontainer">
  <table />
</div>

使用以下CSS规则：

div.tablecontainer
{
  overflow-x:hidden;
}

Answer 2

试试这个

<body style="overflow-x:hidden;">

或使用任何CSS类将此属性添加到您的body标签中。

Answer 3

<块引用>

为其添加“溢出-x”样式。您可以隐藏溢出或使包含表格的 div 水平滚动。

水平滚动溢出

<div class="col-12" style="overflow-x:scroll;">

隐藏溢出

<div class="col-12" style="overflow-x:hidden;">

Html表延伸出屏幕

3 个答案: