0

好的，如果您今天认识我之前的一些帖子，请先道歉。我有一段我写的 HTML，这似乎是唯一的方法。

  • 当您移动 tbody 时，随之而来的水平滚动保持 thead 与 tbody 对齐。
  • 垂直滚动仍然保持在视图中。

我能做到这一点的唯一方法是使用两张桌子。这很有效，请随意尝试。但是，我对列的宽度由其中的文本大小而不是我设置的宽度属性确定的方式存在问题。任何人都可以帮忙吗？

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

编辑： 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>
4

2 回答 2

0

我不知道你整个项目有多大，但是有一个jquery dataTable插件可以解决这个问题。

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

于 2013-01-27T07:04:14.550 回答
-1

在 CSSwidth: x中指定最小宽度，因此浏览器可能会扩展列以适应超过它的表格正文中的文本。

于 2011-05-07T18:04:53.157 回答