Question

如何组织css以便<%= averaged.name %>(<%= averaged.metric %>)的每次迭代都是新列？

averaged.name（averaged.metric）有很多结果。每个结果在其各自的列中都有自己的行。

EX：

NAME(METRIC) | NAME(METRIC) | NAME(METRIC) etc...
RESULT       | RESULT       | RESULT      
RESULT       | RESULT       | RESULT    
RESULT       | RESULT       | RESULT
etc...

使用此代码，我可以获取结果行，但不能获取名称（指标）列。后者显示为新闻行，而不是跨越页面。

<table>
  <% @averaged_quantifieds.each do |averaged| %>
    <% if averaged.user == current_user %>      
      <th><%= averaged.name %>(<%= averaged.metric %>)</th>
     <% averaged.results.each do |result| %>
      <tr><td><%= result.result_value %></td></tr>
     <% end %>
    <% end %>
  <% end %> 
</table>

quantifieds.css.scss

select {
  width: 30.1%;
  border: 1px solid #cccccc;
  background-color: #ecf0f1;
}

.america {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.america2 {
  padding-top: .7em;
}

.america3 {
  float: right;
}

.btn-group {
  background: #c0392b;
  border: #000;
  border-radius: 8px;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #ffffff;
  font-size: 15px;
  padding: 8px 18px 8px 18px;
  text-decoration: none;
}

.deadline {
  width: 8%
}

.goal {
  width: 70%
}

td {
  padding-top: .7em;
  padding-bottom: .7em;
  padding-left: .7em;
  padding-right: .7em;
}

.btn {
  background: #c0392b;
  border: #000;
  border-radius: 8px;
  font-family: verdana, arial, helvetica, sans-serif;
  color: #ffffff;
  font-size: 15px;
  padding: 8px 18px 8px 18px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.btn:active{
  color: #FFFFFF;
}

.values-button {
  margin-top : -9px;
  margin-left : 10px; 
}

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg:                         #ecf0f1;
$font-family-sans-serif:          'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$navbar-height:                   45px;
$navbar-default-bg:               white;
$navbar-default-brand-color:      #c0392b;
$brand-primary:                   #000;
$jumbotron-bg:                    #FFFFFF;

@import 'bootstrap-sprockets';
@import 'bootstrap';

.center {
     text-align: center;
}

.navbar-brand {
     font-weight: bold;
}

a {
  &:hover {
    color: #666;
    text-decoration: none;
  }
}

提前感谢您的帮助！我很难理解如何使用Ruby on Rails的动态来格式化css / html表，所以如果你有任何可以帮助我学习的优秀资源，我会非常感激。再次感谢！

Answer 1

首先，基本HTML表格如下所示：

<table>
  <th colspan="1">Ran (miles)</th>
  <tr>
    <td>1.2</td>
  </tr>
  <tr>
    <td>2.0</td>
  </tr>
  <tr>
    <td>3.1</td>
  </tr>
  <tr>
    <td>1.5</td>
  </tr>
  <tr>
    <td>1.2</td>
  </tr>
</table>

如何使用动态Ruby on Rails创建列？

1 个答案: