在div語句中更改表格樣式時遇到問題

Question

我在HTML5中創建了一個表格，並使用CSS使其更漂亮。然後我決定添加一個滾動條並使用webkit來改變它的風格。現在我使用div來讓我的滾動條工作後，好像我的CSS代碼爲tbody，tr，thead等。沒有工作。我想知道我做錯了什麼。我肯定我沒有正確調用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> 

Answer 1

你不需要每次打電話給你的主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; 
} 

Answer 2

.mytablcontainer #mytable.td {}刪除「。」點TD之前，糾正你的類的拼寫

.mytablecontainer #mytable td {} 

Demo