Is there a good way to put scrollbars on a <div> that contains an asp:GridView?

Is there a good way to put scrollbars on a <div> that contains an asp:GridView?

I have a have an asp:GridView called SquadronGridView that has 10 DataFields (2 are hidden). If my GridView has too many rows, I want to give it scrollbars. I place it in a <div> called #grid and use the following script:

            <script>
                 var divWidth = document.getElementById("SquadronGridView").offsetWidth
                 var divHeight = document.getElementById("SquadronGridView").offsetHeight
                 $('#grid').remove('height')
                 $('#grid').remove('overflow-y')
                 if (divHeight > 500)
                 {
                     divHeight = 500
                     $('#grid').css('overflow-y', 'scroll')
                     $('#grid').css('height', divHeight)
                     $('#grid').css('width', divWidth)
                 }
             </script>

The code works and the scrollbars are attached to the side of the GridView (without this script, the scrollbars do not touch the GridView and have a large gap between the GridView and the scrollbars). The problem is that if the GridView has a height of less than 500px, the table is single spaced without any word wrapping or double spacing.



When the GridView has a height of more than 500px, scrollbars are attached, but some of the columns are not as wide as they should be causing some rows to have double spacing and word wrapping.

Is there a better way?