css 在div语句中更改表的样式时出错

5n0oy7gb  于 2022-11-19  发布在  其他
关注(0)|答案(3)|浏览(113)

我在HTML5中创建了一个表格,并使用CSS使其美观。然后我决定添加一个滚动条,并使用webkit更改其样式。现在,在我使用div使滚动条工作后,tbody、tr、head etc.不起作用。我想知道我做错了什么。我肯定我没有正确调用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>
bqf10yzr

bqf10yzr1#

.mytablcontainer #mytable.td {}删除td前的.“”点并更正类的拼写

.mytablecontainer  #mytable td {}

Demo

64jmpszr

64jmpszr2#

您不需要在每次主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;
}
zc0qhyus

zc0qhyus3#

对于多个属性,请使用以下命令:

#mytable table, #mytable th, #mytable td {
    border: 1px solid black;
    border-collapse: collapse;
}

相关问题