HTML表格,跟踪标题的水平滚动和垂直滚动-文本宽度问题

HTML表格,跟踪标题的水平滚动和垂直滚动-文本宽度问题,html,css,scroll,column-width,text-width,Html,Css,Scroll,Column Width,Text Width,好的,首先,如果你认出了我今天早些时候的一些帖子,我向你道歉。我写了一段HTML,这似乎是唯一的方法 当您移动车身时,下面的水平滚动条将保持车身与车身对齐 垂直滚动,仍然可以查看thead 我能做到这一点的唯一方法是使用两张桌子。这很管用,您可以随意尝试。但是,我有一个问题,列的宽度是由列中文本的大小而不是我设置的宽度属性决定的。有人能帮忙吗 我只是想让一列的宽度表示一列的宽度 编辑:1200宽度的原因是溢出div内的实际大小为8x 150px <script type='te

好的,首先,如果你认出了我今天早些时候的一些帖子,我向你道歉。我写了一段HTML,这似乎是唯一的方法

  • 当您移动车身时,下面的水平滚动条将保持车身与车身对齐
  • 垂直滚动,仍然可以查看thead
我能做到这一点的唯一方法是使用两张桌子。这很管用,您可以随意尝试。但是,我有一个问题,列的宽度是由列中文本的大小而不是我设置的宽度属性决定的。有人能帮忙吗

我只是想让一列的宽度表示一列的宽度

编辑:1200宽度的原因是溢出div内的实际大小为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>

功能匹配滚动条(SourceID、TargetID、DoIfMoz){
if(DoIfMoz | | navigator.userAgent.indexOf(“Firefox”)=-1)document.getElementById(TargetID).scrollLeft=document.getElementById(SourceID).scrollLeft;
}
T
T
tt
T
T
ttttt
ttttt
tt
1.
1.
1.
1.
1111111111
1.
1.
1.

在CSS
中,宽度:x
指定了最小宽度,因此浏览器可能会扩展列以适应超出它的表体中的文本。

我不知道整个项目有多大,但有一个插件可以解决此问题

它有很多用于处理表的选项。如果您只想实现一些选项,我建议您使用“jquery.min”文件