0

ある種のダッシュボードを作成する必要があります。それは基本的に多くの数字を持つテーブルになります（これらのa、b、csはすべて数字で、おそらく最大3桁です）

これが私がやりたいことです

私の問題は、写真でわかるように、動的なセクションがいくつかあることです (レコードの数がわからないなど)。このため、それらのセクションにスクロールバーを追加する必要があります。 .

スクロール バーがあるため、1 つのテーブルにすべてを配置することはできません (またはできるでしょうか?)。これにより、同じ列が常に整列されない可能性があります。基本的にすべての最新バージョンのブラウザーで動作する必要があり、左または右にピクセルが失われることを恐れています。

私が達成しようとしているのは、基本的に次のようなものです:(意図的に間違った場所にDIVを追加したことに注意してください)

<table>
<tr>
    <td>a</td>
    <td>b</td>
</tr>
<div id="div2" style="overflow-y: auto; overflow-x:hidden; height: 60px;>
<tr>
    <td>a</td>
    <td>b</td>
</tr>
</div>
<tr>
    <td>a</td>
    <td>b</td>
</tr>
</table>

これが重要かどうかはわかりませんが、マウスオーバーで表示されるスクロールバーを使用したいと思います。このように。

4

2 に答える 2

1

これをコーディングする前に、使用する必要があるすべてのタグを知る必要があります。

  1. <div>に子供として直接来ることはできません<table>。<tbody>代わりに使用してください。意図的に追加したとはいえ、これをお勧めします。:)
  2. ヘッダーをラップし<thead>て、適切なパディングを与えます。

したがって、最終的には、コードは次のようになります。

<table>
    <thead>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        </div>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
    </tbody>
</table>

そしてあなたのCSSは次のようになります：

tbody {overflow-y: auto; overflow-x:hidden; height: 60px;}

そして、あなたの質問のために...

  1. スクロール バーがあるため、すべてを 1 つのテーブルに収めることはできません (できるでしょうか?)。

    はい！タグ内にそれらを追加することで、それらを単一のテーブルに入れることができ<tbody>ます。<tbody>また、 1 つのテーブル内に多くのタグが存在する可能性があることにも注意してください。

  2. マウスオーバーで表示されるスクロールバーを使用したいと思います。

    シンプルな CSS を使用してそれを行うことができます。

    tbody {overflow: hidden;}
tbody:hover {overflow: auto;}

    Facebook のようにスクロールバーのスタイルを設定したい場合は、jScrollPaneというプラグインを使用する必要があります。


    (出典: tympanus.net )

  3. 表形式のデータにもっと素晴らしい効果が必要だと感じた場合は、jQuery Javascript ライブラリのプラグインであるDataTablesを使用してください。プログレッシブ エンハンスメントの基盤に基づいた非常に柔軟なツールであり、高度な対話コントロールを任意の HTML テーブルに追加します。


    (出典: webresourcesdepot.com )

于 2013-02-14T13:41:01.833 に答える