0

今日の私の以前の投稿のいくつかを認識している場合は、まずお詫び申し上げます。私が書いた HTML がありますが、これが唯一の方法だと思われます。

  • tbody を移動すると、それに続く水平スクロールにより、tbody と整列した状態が維持されます。
  • 広告が表示されたままの垂直スクロール。

これを行う唯一の方法は、2 つのテーブルを使用することでした。これは機能しますので、お気軽に試してみてください。ただし、列の幅が、設定した width プロパティではなく、列内のテキストのサイズによって決定される方法に問題があります。誰でも助けることができますか？

列の幅が列の幅を意味するようにしたいだけです

編集: 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

CSSでは最小width: x幅が指定されているため、ブラウザーは、それを超えるテーブル本体のテキストに合わせて列を拡張する場合があります。

于 2011-05-07T18:04:53.157 に答える