Rails - 詳細情報を入れてもCSSテーブルが整列しない

Question

私は政治的なアプリケーションの一部として格子状のシステムを作ろうとしています。 5つの問題（横軸）と候補者のそれぞれの立場（垂直）をインポートすると、グリッドは依然として整列しています。しかし、6番目の問題を追加すると、tdとtdの下位が整列しません。テーブル：固定レイアウトとpxではなくvwに基づく測定でも、それは一直線にならない。前

：Heading and rows aligned

第六問題が追加された後：ここでPardon the interrupted overlap, but suffice it to say that the heading does not align with the rows.

は、グリッドに関連するCSSコードです：

.grid{ 
    width: 80vw; 
    overflow-x: scroll; 
} 

.grid h2{ 
    font-size: 2vw; 
    font-family: "Arapey", serif; 
} 

table tr{ 
    display: inline-block; 
    border:.3vw #203042 solid; 
    overflow-x: scroll; 
    padding-top: 1vw; 
    padding-bottom: 0.3vw; 
    overflow-x: scroll; 
    width:97vw; 
    padding: 0.1vw; 
} 

table td{ 
    text-align:center; 
    padding-bottom: 1vw; 
    font-size: 2vw; 
    width:15vw; 
} 

#racetype{ /*Why do the other rows change sizes along with the window, but not this one? */ 
    width:15vw; 
    background-color: #404045; 
    color:white; 
    font-family: 'Teko', serif; 
} 

.issuename{ 
    width:15vw; 
    background-color: #404045; 
    color:white; 
    font-family: 'Teko', serif; 
} 

.position{ 
    width:15vw; 
    background-color: #202023; 
} 

th h1{ 
    font-family: 'Esteban', serif; 
    font-size:2vw; 
    color:white; 
} 

th h3{ 
    font-family: 'Esteban', serif; 
    font-size:2vw; 
    color:white; 
} 

th h2{ 
    font-family: 'Esteban', serif; 
    font-size: 1vw; 
    color: white; 
    font-weight: 700; 
} 

th{ 
    background-color: #403049; 
    color:white; 
    font-family: 'Arapey', serif; 
    line-height: 2vw; 
    width: 15vw; 
    height:6vw; 
} 

.candiname { 
    background-color: #452059; 
} 

.candiname h2{ 
    color:white; 
    font-family: 'Esteban', serif; 
    font-size: 1.5vw; 
    line-height: 0.3vw; 
} 

.candiname h4{ 
    color:white; 
    font-family: 'Esteban', serif; 
    font-size:1.2vw; 
    line-height: 0vw; 
} 

td{ 
    background-color: #5f5f5f; 
} 

td h3{ 
    font-family: 'Esteban', serif; 
    font-size:1vw; 
    color: white; 
} 

td h2{ 
    font-family: 'Esteban', serif; 
    font-size: 2vw; 
    color: white; 
} 

a:hover{ 
    opacity: .5; 
    text-transform:uppercase; 
} 


.positions h3{ 
    display: none; 
    font-family: 'Esteban', serif; 
    font-size:4vw; 
    color:white; 
    line-height: 0vw; 
} 

し、関連するHTML/ERB：

<div class = "grid"> 
    <table> 
    <thead> 
     <tr> 
     <th><h2><i>The</i> Presidential <i>Grid</i></h2></th> 
     <% @issues.sort.each do |issue| %> 
      <th> 
      <h2><%= issue.issname %></h2> 
      </th> 
     <% end %> 
     </tr> 
    </thead> 


    <% @candidates.each do |candidate| %> 
    <tbody> 
     <tr> 
     <td class="candiname"> 
      <h2><%= candidate.fname %> <%= candidate.lname %></h2> 
      <h4><%= candidate.party %></h4> 
     </td> 

      <% Position.where(candidate_id: candidate.id).each do |position| %> 

      <td class="positions"> 
       <% if position.position == nil%> 
       <h3>?</h3> 
       <% else %> 
       <h3><em><%= link_to '✓', position_path(position) %> </em></h3> 
       <% end%> 
      </td> 

      <% end %> 


     </tr> 
     </tbody> 
    <% end %> 

    </table> 
</div> 


Thank you very much! 

Answer 1

正直言って、テーブルをまったく使用しないでください。j USTから、それは

you can check it here

モバイルフレンドリーにもブートストラップ宝石、および使用のグリッドシステムをインストールし、表示サイズの4種類のためにそれをcostumizeすることができ、それは常に、これはある理由がある