左側（垂直）の見出しのある応答テーブル

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> 

本当に素晴らしいコードです。私の問題は今、テーブルの見出しをテーブルの左側に置いておきたいということです。私はちょっと周りにグーグルグーグルで見つかった...まあ、ほとんど何もない。記載されている唯一の方法は、タグとタグを使用しないことでしたが、Dudleyが作成したペンでの使用には必須です。

theadtbodyタグを使用して左に見出しを達成する方法を知っている人はいますか？

このたびはお時間を頂き、誠にありがとうございます。

Answer 1

ちょうどあなたのテーブルヘッダに左の整列を与える：

thead{ 
    text-align:left; 
}