0

I'm trying to turn this index file into two columns where the left side is the value names (i.e. "Be the change you wish to see in the world") and the right side are their respective categories, edit paths, and delete paths.

Ideally I'd like the value attributes to not shift according to the length of the value name, but instead be fixed. It should also be fixed to the first line of the name (if the name is really long the name would line break until finished).

I hope I didn't make it sounded too complicated. I think it should be simple I've just had a hard time finding the answer. Thanks for any help given!

<!-- 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>'s (表格行)

<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 回答