0

このインデックス ファイルを 2 つの列に変換しようとしています。左側は値の名前 (つまり、「世界で見たいと思う変化になる」) で、右側はそれぞれのカテゴリ、編集パス、および削除パスです。 .

理想的には、値の名前の長さに応じて値の属性がシフトするのではなく、固定されることを望みます。また、名前の最初の行に固定する必要があります (名前が非常に長い場合、名前は終了するまで改行されます)。

あまりにも複雑に聞こえなかったことを願っています。答えを見つけるのに苦労しただけなので、簡単にすべきだと思います。助けてくれてありがとう！

<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
  
  <div class="panel-heading">Values</div>
  
  <div class="panel-body">
    <p>Subjective, Non-Measureable, Inspirational and/or Helpful</p>
  </div>

  <!-- Table -->
  <table class="table">
    <% @values.each do |value| %>
      <% if value.user == current_user %>

        <td><%= value.name %></td>
             
        <td>
          <b><%= value.categories %></b>
          <%= link_to edit_value_path(value) do %>
            <span class="glyphicon glyphicon-edit"></span>
          <% end %>
          <%= link_to value, method: :delete, data: { confirm: 'Are you sure?' } do %>
            <span class="glyphicon glyphicon-trash"></span>
          <% end %>
        </td>

      <% end %>
  <% end %>
 </table>
</div>

4

1 に答える 1

0

が必要です<tr>(表の行)

<table class="table">
    <% @values.each do |value| %>
      <% if value.user == current_user %>
      <tr>
        <td><%= value.name %></td>

        <td>
          <b><%= value.categories %></b>
          <%= link_to edit_value_path(value) do %>
            <span class="glyphicon glyphicon-edit"></span>
          <% end %>
          <%= link_to value, method: :delete, data: { confirm: 'Are you sure?' } do %>
            <span class="glyphicon glyphicon-trash"></span>
          <% end %>
        </td>
      </tr>
      <% end %>
  <% end %>
 </table>

html テーブルの詳細については、 http://www.w3schools.com/html/html_tables.aspを参照してください (通常、w3schools について言及することはありませんが、要点を理解するだけでも問題ありません) 。

テーブルにはさらにいくつかの要素がありますが、それらは通常 tr および td として使用されません

改行しないように td 幅を制御する方法の例を次に示します。

http://codepen.io/Vall3y/pen/gbwKmX

ルールを削除します

.category {
  width: 100px
}

そしてラインが切れる

私の記憶が正しければ、テーブルの改行はスペース制限がある場合にのみ発生するため、状況を把握する必要があります

于 2014-12-27T17:59:20.130 に答える