divステートメント内のテーブルのスタイルを変更する際の問題

アーロン

HTML5でテーブルを作成し、CSSを使用してきれいにしました。次に、スクロールバーを追加し、Webkitを使用してそのスタイルを変更することにしました。divを使用してスクロールバーを機能させた後、tbody、tr、theadなどのCSSコードのように見えます。動作していません。私は自分が何を間違っているのか疑問に思いました。私はhtmlテーブルの属性を正しく呼び出していないことを確信しています。私はhtml5とcssに非常に慣れていませんが、もっと学びたいと思っています。

これが私のコードです:

2013年7月11日午後9時36分更新


CSSコード


::-webkit-scrollbar {
    width: 12px;
    color:crimson;
    background-color: black;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    background-color:black;

}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background-color:gray;
}

.mytablecontainer #mytable{
    width:500px;
    border-collapse:separate;
    background:crimson;
    border-radius: 15px;
}
.mytablecontainer   tbody {
    overflow: auto;
    height: 150px;
    float: left;
    width: 100%;
}
.mytablcontainer  #mytable td {
    text-align:center;
    background:gray;
    border-bottom:5px solid black;
    border-radius: 15px;
}
.mytablecontainer #mytable th {
    font-weight:bold;
    text-align:center;
    background:crimson;
    border-bottom:5px solid black;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    float: left;
    width: 100%;
}
.mytablecontainer #mytable tr {
    width: 100%;
    display: table;
}

HTML5コード


<div class="mytablecontainer">
<table id="mytable">
    <thead>
    <tr>
        <span>
            Playlist
        </span>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td> <span>
            LINK 1
            </span>

            </td>
        </tr>
        <tr>
            <td> <span>
            LINK 2
            </span>

            </td>
        </tr>
        <tr>
            <td> <span>
            LINK 3
            </span>

            </td>
        </tr>
        <tr>
            <td> <span>
            LINK 4
            </span>

            </td>
        </tr>
        <tr>
            <td> <span>
            LINK 5
            </span>

            </td>
        </tr>
        <tr>
            <td> <span>
            LINK 6
            </span>

            </td>
        </tr>
        <tr>
            <td> <span>
            LINK 7
            </span>

            </td>
        </tr>
    </tbody>
</table>
</div>
アディルスアディルス

メインのdivセレクターがこのcssを試すたびに呼び出す必要はありません

::-webkit-scrollbar {
    width: 12px;
    color:crimson;
    background-color: black;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    background-color:black;

}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background-color:gray;
}

.mytablecontainer #mytable{
    width:500px;
    border-collapse:separate;
    background:crimson;
    border-radius: 15px;
}
#mytable tbody {
    overflow: auto;
    height: 150px;
    float: left;
    width: 100%;
}
#mytable td {
    text-align:center;
    background:gray;
    border-bottom:5px solid black;
    border-radius: 15px;
}
#mytable th {
    font-weight:bold;
    text-align:center;
    background:crimson;
    border-bottom:5px solid black;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    float: left;
    width: 100%;
}
#mytable tr {
    width: 100%;
    display: table;
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

SQL-同じテーブルとの左結合、ONステートメントを使用して左右のテーブルを照合する際の問題

分類Dev

リストのリストをテキストファイルにインポートする際の問題

分類Dev

postgresql:テーブルの列を変更するという私のsqlステートメントの何が問題になっていますか

分類Dev

gitからラテドックマスターをインストールする際の問題

分類Dev

Laravelで「アーティスト」テーブルのデータを表示する際の問題

分類Dev

Capybaraテストでルートを参照する際の問題

分類Dev

ユーティリティモジュールをインストールする際の問題

分類Dev

forループとifステートメントを使用してASCIIボックスを作成する際の問題

分類Dev

関数内のスタイル変更に関するelseステートメントの削除

分類Dev

switchステートメントを使用してHTML要素のテキストコンテンツを変更する際の問題

分類Dev

同じテーブル セル内のテキストとアイコンの色を変更する

分類Dev

jquerycssを変更するレスポンシブテーブルの問題

分類Dev

ネストされたテーブルでrvestを使用する際の問題

分類Dev

Ubuntuを外付けHDDにインストールする際の問題(ブートメニュー)

分類Dev

UbuntuシステムのRにSodiumパッケージをインストールする際の問題

分類Dev

「次へ」ステートメントとの干渉により、データテーブルの「次へ」ボタンの変換で問題が発生する

分類Dev

Woocommerceマイアカウント注文テーブルの表示ボタンのテキストを変更する

分類Dev

Composerでlaravelをインストールする際の問題

分類Dev

Ubuntuにlxmlをインストールする際の問題

分類Dev

Anacondaで「MATLABEngineforPython」をインストールする際の問題

分類Dev

phpをdebianにインストールする際の問題

分類Dev

OSXにFlutterをインストールする際の問題

分類Dev

Anacondaでtweepyをインストールする際の問題

分類Dev

Rにtidyverseをインストールする際の問題

分類Dev

OpencvをAnacondaにインストールする際の問題

分類Dev

PipでTextBlobをインストールする際の問題

分類Dev

CentOSにRMariaDBをインストールする際の問題

分類Dev

Ubuntuにiperfをインストールする際の問題

分類Dev

Adobe AcrobatReaderをインストールする際の問題

Related 関連記事

  1. 1

    SQL-同じテーブルとの左結合、ONステートメントを使用して左右のテーブルを照合する際の問題

  2. 2

    リストのリストをテキストファイルにインポートする際の問題

  3. 3

    postgresql:テーブルの列を変更するという私のsqlステートメントの何が問題になっていますか

  4. 4

    gitからラテドックマスターをインストールする際の問題

  5. 5

    Laravelで「アーティスト」テーブルのデータを表示する際の問題

  6. 6

    Capybaraテストでルートを参照する際の問題

  7. 7

    ユーティリティモジュールをインストールする際の問題

  8. 8

    forループとifステートメントを使用してASCIIボックスを作成する際の問題

  9. 9

    関数内のスタイル変更に関するelseステートメントの削除

  10. 10

    switchステートメントを使用してHTML要素のテキストコンテンツを変更する際の問題

  11. 11

    同じテーブル セル内のテキストとアイコンの色を変更する

  12. 12

    jquerycssを変更するレスポンシブテーブルの問題

  13. 13

    ネストされたテーブルでrvestを使用する際の問題

  14. 14

    Ubuntuを外付けHDDにインストールする際の問題(ブートメニュー)

  15. 15

    UbuntuシステムのRにSodiumパッケージをインストールする際の問題

  16. 16

    「次へ」ステートメントとの干渉により、データテーブルの「次へ」ボタンの変換で問題が発生する

  17. 17

    Woocommerceマイアカウント注文テーブルの表示ボタンのテキストを変更する

  18. 18

    Composerでlaravelをインストールする際の問題

  19. 19

    Ubuntuにlxmlをインストールする際の問題

  20. 20

    Anacondaで「MATLABEngineforPython」をインストールする際の問題

  21. 21

    phpをdebianにインストールする際の問題

  22. 22

    OSXにFlutterをインストールする際の問題

  23. 23

    Anacondaでtweepyをインストールする際の問題

  24. 24

    Rにtidyverseをインストールする際の問題

  25. 25

    OpencvをAnacondaにインストールする際の問題

  26. 26

    PipでTextBlobをインストールする際の問題

  27. 27

    CentOSにRMariaDBをインストールする際の問題

  28. 28

    Ubuntuにiperfをインストールする際の問題

  29. 29

    Adobe AcrobatReaderをインストールする際の問題

ホットタグ

アーカイブ