在浏览器窗口右侧粘贴某一列

好的，这里有一个给你。我想要一张总共4列的表格。我只想查看这些列中的3个，即使在调整浏览器大小时，第4列总是隐藏起来。但是，我仍然需要保留滚动条，以便必要时可以滚动到第4列。基本上3列占100％的视口。在浏览器窗口右侧粘贴某一列

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

2011-05-27 Paul

@Fosco - 你看起来不够硬。：） – 2011-05-27 20:26:05

所有列的宽度是否相等？ – Liam 2011-05-27 20:26:34

@codehunter - 你的意思是你想要在一行中有3列，然后在第二行再加一列？ – 2011-05-27 20:26:53

好乡亲。这是你如何做的，创建一个你可以在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>

我希望这可以帮助别人出未来。

来源

2011-06-01 13:57:32 Paul

也，我忘了，还打电话给这个onload。 – Paul 2011-06-01 14:13:29

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

总体div容器，占用了整个窗口。高度/宽度：100％和滚动：无
两个子div，一个用于离屏列，完全位于整个div的左侧：0; right：0;
1st sub-div：包含您的第4列，剩余边距：100％将其推离屏幕。随着容器div上的不滚动，它将实际上消失。
2nd sub-div：包含其他3列，设置为width：容器div的100％。

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

来源

2011-05-27 20:30:56

他不想隐藏它，你必须能够向右滚动才能看到它。 – Fosco 2011-05-27 20:32:49

我不能使用div。只需简单的HTML。谢谢回复。我知道你认为它是一个可怕的设计选择，但它适用于拥有大量数据的应用程序，第4列是可选数据。所以这是“糟糕的设计选择”，因为你说 – Paul 2011-05-27 20:38:51

是真的吗？如果是这样的话，那么你可以使用jquery来设置3列的宽度来占据视区的宽度，而第4列是不在屏幕上的。 – 2011-05-27 20:47:59

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

来源

2011-05-27 21:07:03 daybreaker

我无法得到这种方法的工作。我喜欢你如何去与所有的CSS路线。好想法，但它不工作...... :( – Paul 2011-05-31 21:07:55

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

来源

2011-05-27 22:44:00 drudge

哈哈，甚至没有注意到我说行而不是列...哎呀，我只是想与jsfiddle搞砸，因为我刚刚注册了它...我 – daybreaker 2011-05-28 16:02:12

我也尝试过这种方法，但它不成功，但是非常感谢你的尝试！我知道这听起来像是一个糟糕的设计决定，但它确实是一个非常糟糕的设计决定如果你明白我实际上在做什么，我想我已经解释过，它是针对在第4列有OPTIONAL数据的应用程序，因此没有必要查看它，有些客户端可以更改3列，他们想看到的和可选的数据在第四列，这使得对相关数据更少混淆，我希望能够解释它，谢谢你的努力，我会让你们都知道它是怎么回事 – Paul 2011-05-31 21:14:43

在浏览器窗口右侧粘贴某一列

回答

相关问题