我正在我的 Rails 應用程式中實作一個 HTML 表。目前，我認為：
<table>
<thead>
<tr>
<% @electives.each do |elective| %>
<th><%= elective.name %></th>
<% end %>
</tr>
</thead>
<tbody>
</tbody>
</table>
Elective并且Course是我的應用程式中的模型。我has_and_belongs_to_many在它們之間創建了一個關聯，從而創建了一個courses_electives表。
目前，我的網頁如下所示：
我接下來要做的是在選修名稱下顯示與每個選修相關的所有課程。
我想我可以通過以下方式實作：
<% @electives.each do |elective| %>
<% elective.courses.each do |course| %>
<%= course.name %>
<% end %>
<% end %>
我使用這種方法面臨的問題是它不允許我垂直構建我的表格。我可以<td>在上述回圈中創建新元素，但這會水平呈現資料。也就是說，屬于軟體工程選修課A的課程最終將成為<td>軟體工程選修課B的條目，依此類推。
我想要的是：
我怎樣才能做到這一點？很感謝任何形式的幫助。謝謝你。
uj5u.com熱心網友回復：
斯利姆的建議很好。但是您在這里要與 30 多年前的 html 概念的局限性作斗爭。我們現在有了 grid 和 flexbox，它們是比表格更好的在頁面上排列元素的方法。那么這在modernhtml 中看起來如何呢？（好吧，我會使用 haml b/c 更容易看到結構，而 b/c 我很懶，haml 巖石）
#electives
- @electives.each do |elective|
.elective
.name= elective.name
- elective.courses.each do |course|
.course= course.name
這只是給你一堆 div，但通過一點 css 魔法，我們可以創建你想要的排列：
#electives {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.elective {
display: flex;
flex-direction: column;
}
grid-template-columns 'auto-fit' 宣告會根據您可能擁有的列數進行調整，同時設定最小和最大寬度。它在這里描述。
當然，flexbox 并不關心每個選修課有不同數量的課程。
uj5u.com熱心網友回復：
您可以使用.transpose翻轉列和行。
<% @electives.map(&:courses).transpose.each do |row| %>
<tr>
<% row.each do |course| %>
<td>
<%= course.name %>
</td>
<% end %>
</tr>
<% end %>
請注意nil這里的 -s，因為我認為您的選修課可能沒有完全相同數量的課程。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/505029.html
標籤：轨道上的红宝石