Home/ Questions/Q 5984443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:22:35+00:00

Ok, here is one for you. I want to have a table with 4

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0