在瀏覽器窗口右側粘貼某一列

好的，這裏有一個給你。我想要一張總共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

在瀏覽器窗口右側粘貼某一列

回答

相關問題