gpt4 book ai didi

css - Rails - CSS 表不对齐,因为我在其中放入了更多信息

转载 作者:行者123 更新时间:2023-11-28 05:15:05 25 4
gpt4 key购买 nike

我正在尝试制作一个类似网格的系统作为政治应用程序的一部分。当我输入最多五个问题(横轴)和候选人在这些问题上的各自立场(垂直)时,网格仍然对齐。但是当我添加第六期时,th 和下面的 td 不对齐。即使使用 table:fixed-layout 和基于 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!

最佳答案

老实说,根本不使用表,只需安装 bootstrap gem,并从中使用网格系统

you can check it here

也适合移动设备,您可以根据 4 种显示尺寸对其进行自定义,它始终适合

关于css - Rails - CSS 表不对齐,因为我在其中放入了更多信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39356755/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com