响应表与左侧标题（垂直）

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