title: Trouble changing the style on a table within a div statement
body: <p>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.</p>
  
  <p>Here is my code:</p>
  
  <p>UPDATED 7/11/2013 9:36pm</p>
  
  <hr>
  
  <p>CSS CODE</p>
  
  <hr>
  
  <pre><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;
  }
  </code></pre>
  
  <hr>
  
  <p>HTML5 CODE</p>
  
  <hr>
  
  <pre><code>&lt;div class="mytablecontainer"&gt;
  &lt;table id="mytable"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;span&gt;
              Playlist
          &lt;/span&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;span&gt;
              LINK 1
              &lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;span&gt;
              LINK 2
              &lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;span&gt;
              LINK 3
              &lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;span&gt;
              LINK 4
              &lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;span&gt;
              LINK 5
              &lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;span&gt;
              LINK 6
              &lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt; &lt;span&gt;
              LINK 7
              &lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>