0

我在 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>
4

2 回答 2

2

.mytablcontainer #mytable.td {}消除 ”。” 在 td 之前加点并更正班级的拼写

.mytablecontainer  #mytable td {}

演示

于 2013-07-12T04:24:19.210 回答
0

每次您的主 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;
}
于 2013-07-12T04:37:02.017 回答