Geek asks and answers

Attaching a specific column to the browser window

Ok, here is one for you. I want to have a table with 4 columns. I want to see only 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 that I can scroll to the 4th column, if necessary. Essentially 3 columns accept 100% of the viewport.

I want to use jQuery for this without any plugins.

+3
source share
4 answers

Good. Here, as you do this, create a function that you can call onResize in the body tag. Create a table with a title bar, which will depend on the three columns that will be unused, make it nested (important). Get the size of the full width viewport and set the first width td for it, 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 in the future.

0
source

Is that what you expected? 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;
}
+2
source

JSFiddle , .

( , , @daybreaker, )

kjJY5.pngxFRFM.png

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

, - :

  • , . /: 100% :
  • -divs, , div : 0; right: 0;
  • 1- -div: 4- : 100%, . div .
  • 2nd sub-div: 3 , : 100% div.

, : , , , ? , div. , , CSS , , .

0

More articles:


All Articles