sticking a certain column to right of browser window [closed]
Ok, here is one for you. I want to have a table with 4 columns total. I only want to view 3 of these columns even when resizing my browser leaving the 4th column always hidden from view. However, I still need to keep my scrollbar so I can scroll to the 4th column if necessary. Essentially 3 columns take 100% of viewport.
I want to use jQuery for this without any plugins.
Is this what you were envisioning? 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 isn't working for me at the moment, so no live demo.
(As to why it says Rows instead of Columns, I blame @daybreaker because I started with his 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>
Horribly bad design choice, but you'd do something like this:
- Overall container div that takes up the whole window. height/width: 100% and scroll: none
- Two sub-divs, one for your off-screen column, positioned absolutely within the overall div at left: 0;right:0;
- 1st sub-div: contains your 4th column, with margin-left: 100% to push it off screen. With the no-scroll on the container div, it'll be effectively gone.
- 2nd sub-div: contains the other 3 columns, set to width: 100% of the container div.
Of course, this begs the question: if the 4th column is permanently offscreen and therefore invisible, what is its purpose? If it's just to store other things, then you can accomplish the same thing with a hidden div. And of course, simply disabling CSS or viewing the page source would reveal the column's contents in all its glory, so it's useless for keeping secret stuff hidden.
Ok folks. Here's how you do it, create a function that you can call onResize in the body tag. Create a table with a header row that colspans over 3 of the columns that will be unused, make it nowrap (important). Get the size of the total width viewport and set the first td width to that, it was actually easier than I thought:
<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>
I hope this helps someone out in the future.
加载中,请稍侯......
精彩评论