響應表與左側標題（垂直）

Question

我想構建一個響應表。到目前爲止這麼容易。所以我用下面的CodePen by Dudley Sturey：

*CSS (Pen rewritten for SAAS)* 
table.responsive-table { 
    margin: 0; 
    border-collapse: collapse; 
    font-weight: 100; 
    background: #333; color: #fff; 
    text-rendering: optimizeLegibility; 
    border-radius: 5px; 

    caption { 
     font-size: 2rem; color: #fff;; 
     margin: 1rem; 
     background-size: contain; 
     background-repeat: no-repeat; 
     background-position: center left, center right; 
    } 

    thead th { font-weight: 600; } 
    thead th, tbody td { padding: .8rem; font-size: 1.4rem; } 
    tbody td { padding: .8rem; font-size: 1.4rem; color: #444; background: #eee; } 
    tbody tr:not(:last-child) { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } 

    @media screen and (max-width: 639px) { 

     caption { background-image: none; } 
     thead { display: none; } 
     tbody td { display: block; padding: .6rem; } 
     tbody tr td:first-child { background: #666; color: #fff; } 
     tbody td:before { content: attr(data-th); font-weight: bold; display: inline-block; width: 6rem; } 

    } 
} 

*HTML* 
    <table class="responsive-table"> 
     <caption>The Films of Hayao Miyazaki</caption> 
     <thead align="left"> 
      <tr><th>Film</th><th>Year</th><th>Honor</th></tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>My Neighbor Totoro</td> 
       <td>1988</td> 
       <td>Blue Ribbon Award (Special)</td> 
      </tr>  
      <tr> 
       <td>Princess Mononoke</td> 
       <td>1997</td> 
       <td>Nebula Award (Best Script)</td> 
      </tr> 
      <tr> 
       <td>Spirited Away</td> 
       <td>2001</td> 
       <td>Academy Award (Best Animated Feature)</td> 
      </tr> 
      <tr> 
       <td>Howl’s Moving Castle</td> 
       <td>2004</td> 
       <td>Hollywood Film Festival (Animation OTY)</td> 
      </tr> 
     </tbody> 
    </table> 

這的確是一個美妙的一段代碼。我現在的問題是，我希望桌子左側有表格標題。我搜索了一下，發現像......呃，幾乎沒有。唯一的方法是沒有使用和標籤，但這些是達德利製造的鋼筆的強制使用。

有沒有人有一個想法如何實現在左邊的標題thead任何tbody標籤？

非常感謝您在這件事上的時間和協助。

Answer 1

只要給左對齊到您的表頭：

thead{ 
    text-align:left; 
}