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]
コメントを追加