将特定列固定在浏览器窗口右侧

Question

将特定列固定在浏览器窗口右侧

javascriptjqueryhtml

3

好的，这里有一个需要翻译的问题，涉及到it技术。我想要一个包含4列的表格，即使在调整浏览器大小时，我只想查看其中的3列，第4列始终隐藏不可见。但是，我仍然需要保留滚动条，以便在必要时可以滚动到第4列。本质上，3列占据了视口的100％。

我想要使用jQuery实现这一功能，而不使用任何插件。

- Paul

2

@Fosco - 你还没仔细找呢。 : ) - John Green

所有列的宽度都会相等吗？ - Liam

@John他想要一个第四列，不在屏幕上，只能通过滚动访问。你还是认为我没有找到吗？ - Fosco

@Fosco - 好的，既然水平滚动已经添加到图片中了，它也是我听过的最糟糕的设计选择。：） - John Green

到目前为止，有几个答案提供了可行的示例，而提问者继续评论“不起作用”。现在是将其关闭为“过于局限”的时候了。 - bmargulies

显示剩余4条评论

4个回答

1

JSFiddle目前对我来说无法工作，因此没有实时演示。

（至于为什么它显示“行”而不是“列”，我要归咎于@daybreaker，因为我是从他的fiddle开始的）

<style type="text/css">
    table { border-collapse: collapse; }
    th, td { border: 1px solid #000; padding: 5px; }
</style>

<script type="text/javascript">
    $(window).bind('load resize', function() {
        var col_width = $('#optional-data').outerWidth();
        $('#mytable').css('position','absolute').css('right', (-1) * col_width);
    });
</script>

<table>
    <tr>
        <th>Row 1</th>
        <th>Row 2</th>
        <th>Row 3</th>
        <th id="optional-data">Row 4</th>
    </tr>
    <tr>
        <td>Row 1 Content</td>
        <td>Row 2 Content</td>
        <td>Row 3 Content</td>
        <td>Row 4 Content</td>
    </tr>
</table>

- drudge

哈哈。我甚至没有注意到我说的是行而不是列...哎呀。我只是想在jsfiddle上玩一下，因为我刚刚注册了它...我同意其他人的看法，这实际上是一个非常糟糕的设计决策。 - daybreaker

我也尝试了这种方法，但是没有成功。非常感谢你的尝试！我知道这听起来像一个糟糕的设计决定，但如果你理解我实际上在做什么，它真的不是。我想我已经解释过了，这是为了一个应用程序，在第四列中有可选数据，因此不必查看它。一些客户可以更改前三列中的数据以查看他们想要看到的内容，并将可选数据放在第四列中。这样可以减少对相关数据的混淆。希望这样解释清楚了。感谢你的努力！我会告诉大家进展如何的。 - Paul

0

好的，伙计们。这是如何做到的，创建一个函数，您可以在body标签中调用onResize。创建一个表格，其中包含一个标题行，该行跨越3个未使用的列，使其不换行（很重要）。获取总宽度视口的大小，并将第一个td的宽度设置为该大小，实际上比我想象的要容易：

<html>
<head>
<script src="jquery.min.js"></script> 
<script type="text/javascript">
function doColWidths(){
    $("td:first").css("width",$(window).width());
}
</script> 
</head>
<body onresize="doColWidths()">
    <table>
        <tr>
            <td colspan="3" nowrap="nowrap"></td><td></td>
        </tr>
        <tr>
            <td id="col1">Col1</td>
            <td id="col2">Col2</td>
            <td id="col3">Col3</td>
            <td id="col4">Col4</td>
        </tr>
    </table>
</body>
</html>

我希望这能帮助到未来的某个人。

- Paul

还有，我忘了。也要在onload中调用它。 - Paul

0

设计选择极差，但你可以这样做：

整体容器 div 占据整个窗口。高度/宽度：100%，滚动：无
两个子 div，一个用于屏幕外列，在整体 div 中绝对定位，位置为 left: 0;right:0;
第一个子 div：包含第四列，使用 margin-left: 100% 将其推出屏幕。由于容器 div 上没有滚动条，因此它将被有效地隐藏。
第二个子 div：包含其他三列，设置为容器 div 的宽度：100%。

当然，这引出了一个问题：如果第四列永久处于屏幕外并且因此不可见，那么它的目的是什么？如果只是用来存储其他东西，那么你可以使用隐藏的 div 来实现相同的效果。当然，简单地禁用 CSS 或查看页面源代码将揭示该列的内容，因此它对于保密信息的隐藏毫无用处。

- Marc B

他不想把它隐藏起来，你必须能够向右滚动才能看到它。 - Fosco

我不能使用div，只能使用纯HTML。谢谢您的回复。我知道您认为这是一个可怕的设计选择，但这是为了一个有大量数据的应用程序，第四列是可选数据。所以这就是你所说的“可怕的设计选择”的原因。 - Paul

这是一个实际的表格吗？如果是的话，你可以使用jQuery将3列的宽度设置为占据视口的宽度，第4列则在屏幕外。 - Marc B

是的，我仍在使用jQuery方法。我希望jQuery有一种方法可以将单元格的右侧定位到浏览器窗口的100％，而其他所有内容都会自动适应，无需计算所有其他单元格的宽度并为它们分配百分比。我仍然希望这是液态的，因此当您调整大小时，3列保持100％，第4列仍然溢出。 - Paul

有一种onresize事件，可以检测浏览器窗口的大小调整。我自己从未使用过它，但你可能可以捕获该事件以重新计算列宽。 - Marc B

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- daybreaker · Accepted Answer

这符合您的想象吗？ http://jsfiddle.net/daybreaker/b6LEd/

HTML：

<div id="container">
    <table>
        <tr>
            <th>Row 1</th>
            <th>Row 2</th>
            <th>Row 3</th>
            <th>Row 4</th>
        </tr>
        <tr>
            <td>Row 1 Content</td>
            <td>Row 2 Content</td>
            <td>Row 3 Content</td>
            <td>Row 4 Content</td>
        </tr>
    </table>
</div>

CSS：

body{
    width: 600px;
}

#container {
    overflow: scroll;  
    width: 600px;
}


#container table tr td {
    min-width: 200px;
}