Trouble changing the style on a table within a div statement

Question

I created a table in HTML5 and used CSS to make it pretty. Then I decided to add a scroll bar and used webkit to change the style of that. Now after I used a div to get my scroll bar working it seems like my CSS code for the tbody,tr,thead,etc. are not working. I was wondering what I am doing wrong. I am positive that I am not calling the html table attributes correctly. I am very new to html5 and css but would really like to learn more.

Here is my code:

UPDATED 7/11/2013 9:36pm

---

CSS CODE

---

::-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 CODE

---

<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>

Answer 1

you do not need to call each time your main div selector try this 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;
}