HTML table, horizontal scroll which tracks headings and vertical scroll- problem with text width

Question

Ok firstly apologies if you recognise some of my earlier posts today. I have a piece of HTML i wrote, which seemed the only way to do this.

• Horizontal scroll which follows keeps the thead aligned with tbody as you move tbody.
• Vertical scroll which still keeps the thead in view.

The only way i could do this was using two tables. This works and feel free to try it. However, i have a problem with the way in which the widths of columns are being determined by the size of the text inside them and not the width property i set. Can anyone help?

I simply want the width of a column to mean the width of a column

EDIT: the reason for the 1200 widths is because inside the overflow div the actual size is 8x 150px

    <script type='text/javascript'>
        function MatchScroll(SourceID, TargetID, DoIfMoz) {
                if (DoIfMoz || navigator.userAgent.indexOf("Firefox") == -1) document.getElementById(TargetID).scrollLeft = document.getElementById(SourceID).scrollLeft;
        }
    </script>

    <div id='HeaderTable'  style='width:883px;overflow:auto;overflow-y:hidden;overflow-x:hidden;'>
        <table border='1'   id='HeaderTable' style='width:1200px;float:left;table-layout:fixed;'>
            <thead style='text-align:left;'>
                <tr style='display:block;margin-left:1px;'>
                    <th width='150' style='width:150px;'>t</th>
                    <th width='150' style='width:150px;'>t</th>
                    <th width='150' style='width:150px;'>tt</th>
                    <th width='150' style='width:150px;'>t</th>
                    <th width='150' style='width:150px;'>t</th>
                    <th width='150' style='width:150px;'>ttttt</th>
                    <th width='150' style='width:150px;'>ttttt</th>
                    <th width='150' style='width:150px;'>tt</th>
                </tr>
            </thead>
        </table>
    </div>
    <div id='DataTable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;'  onmouseup="MatchScroll('DataTable','HeaderTable', true);" onmousemove="MatchScroll('DataTable','HeaderTable', false);"     >
        <table border='1' style='width:1200px;float:left;table-layout:fixed;'>
            <tbody id='ClearDetails'>
                <tr id='Row0' style='color:black;height:auto;display:block;'>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1111111111</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                    <td style='width:150px;'>1</td>
                </tr>
            </tbody>
        </table>
    </div>

Answer 1

I don't know how big your whole project is, but there is a jquery dataTable plugin to solve this problem.

It has a lot of options for working with tables. I suggest that you use the "jquery.min" file if you just want to implement a few options.

Answer 2

In CSS width: x specifies the minimum width, so the browser might expand the column to fit text in the table body that exceeds it.