在浏览器窗口的右侧粘贴特定的列

如何解决在浏览器窗口的右侧粘贴特定的列

解决方法

这是您所设想的吗？ 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;
}

, JSFiddle目前无法为我工作，因此没有现场演示。（关于为什么说是“行”而不是“列”，我指责@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>

, 糟糕的设计选择，但您会执行以下操作：占据整个窗口的整体容器div。高度/宽度：100％，滚动：无两个子div，一个用于屏外栏，绝对位于整个div的左侧：0;右：0; 第一细分：包含您的第四列，左边距：100％将其推离屏幕。由于容器div上没有滚动，它将有效地消失。 2nd sub-div：包含其他3列，设置为width：容器div的100％。当然，这引出了一个问题：如果第四列永久不在屏幕上并因此不可见，那么它的目的是什么？如果只是存储其他内容，则可以使用隐藏的div完成相同的操作。当然，只要禁用CSS或查看页面源代码，就可以全面了解该列的内容，因此对于隐藏秘密内容毫无用处。 , 好的，伙计们。这样做的方法是，创建一个可以在body标签中调用onResize的函数。创建一个带有标题行的表，该行跨越3个未使用的列，将其设置为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>

我希望这对以后的人有所帮助。

在浏览器窗口的右侧粘贴特定的列

如何解决在浏览器窗口的右侧粘贴特定的列

解决方法

相关推荐