Question

我正在尝试将类似网格的系统作为政治应用程序的一部分。当我最多导入五个问题（横轴）和候选人在这些问题上的相应位置（垂直）时，网格仍然对齐。但是当我添加第六个问题时，td和下面的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 / 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

老实说，根本不使用表，只需安装bootstrap gem，然后使用网格系统

you can check it here

也适合移动设备，你可以为4种显示器尺寸进行消费，它总是适合

Rails - CSS表格不对齐，因为我输入了更多信息

1 个答案: