Question

好的，这是给你的。我想要一个总共有4列的表。我只想查看其中3列，即使在调整浏览器大小时，第4列始终隐藏在视图之外。但是，我仍然需要保留我的滚动条，以便在必要时滚动到第4列。基本上3列占据视口的100％。

我想在没有任何插件的情况下使用jQuery。

Answer 1

这是你想象的吗？ 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;
}

Answer 2

JSFiddle目前不适合我，所以没有现场演示。

（至于为什么它说Rows而不是Columns，我责怪@daybreaker，因为我从他的小提琴开始）

<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>

Answer 3

糟糕的设计选择，但你会做这样的事情：

占据整个窗口的整体容器div。高度/宽度：100％并滚动：无
两个子div，一个用于屏幕外列，绝对位于左侧的整体div中：0;右：0;
第1个子div：包含第4列，边距为左边：100％将其推离屏幕。随着容器div的无滚动，它将被有效地消失。
第二个子div：包含其他3列，设置为width：容器div的100％。

当然，这引出了一个问题：如果第4列是永久性的屏幕外，因此不可见，它的目的是什么？如果它只是存储其他东西，那么你可以用隐藏的div完成同样的事情。当然，简单地禁用CSS或查看页面源会显示列的所有内容，所以隐藏秘密内容是没用的。

Answer 4

好的伙计们。这是你如何做到的，创建一个你可以在body标签中调用onResize的函数。创建一个带有标题行的表，该标题行将对3个未使用的列进行colspan，使其成为nowrap（重要）。获取总宽度视口的大小并将第一个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>

我希望将来可以帮助某人。

将某一列粘贴到浏览器窗口的右侧

4 个答案: