2016-07-31 7 views
0

ich nur ein scaffold in Schienen erstellt und alle stories in Index-Seite auflisten und _stories.html.erb ist teilweise die in index.html.erb.html.erb Satz div funktioniert nicht richtig

gemacht wurde möchte ich jede Geschichte div ein rotes hat Hintergrund zum Beispiel:

.storyCell{ 
    background-color:red; 
    height:100px; 
} 

_stories.html.erb

<tbody> 
     <% @stories.each do |story| %> 
     <div class="storyCell"> 
      <tr> 
      <td><%= story.content %></td> 
      <td><%= story.finished %></td> 
      <td><%= link_to 'Show', story %></td> 
      <td><%= link_to 'Edit', edit_story_path(story) %></td> 
      <td><%= link_to 'Destroy', story, method: :delete, data: { confirm: 'Are you sure?' } %></td> 
      </tr> 
     </div> 
     <% end %> 
     </tbody> 

Aber das Ergebnis ist das rote div alle oben im Story-Modell Eigenschaften. Vielen Dank!

enter image description here

Antwort

1

Dieser ungültige HTML. Du kannst kein Div in einem Tbody haben. Nehmen Sie den div und setzen nur die Klasse direkt auf die Tabellenzeile:

<tr class="storyCell"> 

Was passiert hier ist, dass der Browser das Beste zu tun versucht, kann es die ungültige HTML zu machen, und so zieht er den div aus (was in der Tabelle nicht erlaubt ist) und rendert es stattdessen über der Tabelle.

1

Sie können die Klasse <tbody> wie folgt geben:

<tbody class="storyCell"> 

Hier ist das w3schools Beispiel kann man betrachten: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tbody .Sie nicht div in Tabellenelemente einfügen können, wie es in der richtigen html machen wird Ausgabe.

+0

Wenn ich diese Klasse "storyCell" auf "tbody" hinzufügen, scheint die Höhe nicht zu funktionieren. –

+0

Das hat mit Ihrem CSS zu tun. –