Rails - таблица CSS не выравнивается, поскольку я помещаю дополнительную информацию в

Question

Я пытаюсь создать сетчатую систему как часть политического приложения. Когда я импортирую до пяти выпусков (горизонтальная ось) и соответствующая позиция кандидатов по этим вопросам (по вертикали), сетка по-прежнему выравнивается. Но когда я добавляю шестой вопрос, th и под td не выравниваются. Даже с таблицей: фиксированная макет и измерения, основанные на vw, а не px, не выравниваются.

До: 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/Еврорадио:

<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 усть установка начальной загрузки камня, и подвесная системы использования из него

you can check it here

также для мобильных устройств, и вы можете costumize его для 4 видов размера дисплея, он будет всегда соответствовать