画面のレイアウトを変えたい

内容をすべて縦列に揃えたい

html
1   <% @posts.each do |post| %>
2    <body>
3      <tr>
4        <td><%= image_tag post.image_url(:thumb) if post.image.present?%></td>
5        <td><%= post.title %></td>
6        <td><%= post.body %></td>
7        <td><%= link_to '内容を確認する', post %></td>
8        <td><%= link_to '編集する', edit_post_path(post) %></td>
9        <td><%= link_to '削除', post, method: :delete, data: { confirm: '削除します。よろしいですか？' } %></td>
10      </tr>
11    <% end %>
12  </tbody>

このようなコードを入れると<% @posts.each do |post| %>　〜　<% end %>までの内容がすべて横一列で表示されます。

image_tagとtitleとbodyを縦に、それ以外を横一列に表示したいのですが、どのようにすればいいでしょうか？
cssはこのようになっています。

css
1body {
2  background-color: #e6eaff;
3  color: #333;
4  margin: 33px; }
5
6body, p, ol, ul, td {
7  font-family: verdana, arial, helvetica, sans-serif;
8  font-size: 13px;
9  line-height: 18px; }
10
11pre {
12  background-color: #eee;
13  padding: 10px;
14  font-size: 11px; }
15
16a {
17  color: #000; }
18
19a:visited {
20  color: #666; }
21
22a:hover {
23  color: #fff;
24  background-color: #000; }
25
26th {
27  padding-bottom: 5px; }
28
29td {
30  padding: 0 5px 7px; }
31
32.container {
33  width: 500px;
34  margin: 20px auto;
35}
36
37input[type="text"], textarea{
38  box-sizing: border-box;
39  width: 400px;
40  padding: 5px;
41}
42
43textarea {
44  height: 160px;
45}
46
47div.field {
48  margin-bottom: 10px;
49}
50
51div.actions {
52  margin-bottom: 10px;
53}
54
55#notice {
56  color: green; }
57
58.field_with_errors {
59  padding: 2px;
60  background-color: red;
61  display: table; }
62
63#error_explanation {
64  width: 450px;
65  border: 2px solid red;
66  padding: 7px 7px 0;
67  margin-bottom: 20px;
68  background-color: #f0f0f0; }
69
70#error_explanation h2 {
71  text-align: left;
72  font-weight: bold;
73  padding: 5px 5px 5px 15px;
74  font-size: 12px;
75  margin: -7px -7px 0;
76  background-color: #c00;
77  color: #fff; }
78
79#error_explanation ul li {
80  font-size: 12px;
81  list-style: square; }
82
83label {
84  display: block; }
85

ちなみに<tr>と<td>を消してもすべて横一列に表示されてしまいます。

どこが原因なのでしょうか？

行動規範の内容に同意します

回答2件

入れ子構造はあっているか、確認をお願いします。

<body>ではなく、<tbody>ではないですか?
<% @posts.each do |post| %>の位置は<tr>の前ではないですか?

HTML構造を変えずに無理やり実装しようとすると、以下のようになると思います。

CSS
1table,
2tbody {
3  display: block;
4}
5tr {
6  display: flex;
7  flex-wrap: wrap;
8}
9td {
10 display: block;
11 flex: 1 1 0%;
12}
13td:nth-child(1),
14td:nth-child(2),
15td:nth-child(3) {
16 flex: 0 0 100%;
17}

HTML構造を変えることができるのであれば、

<tbody>、<tr>、<td>使うシチュエーションではなさそうに見えるので、<div>などに置き換えてもいいのでは、と思います。 ```HTML <div> <div><%= image_tag post.image_url(:thumb) if post.image.present?%></div> <div><%= post.title %></div> <div><%= post.body %></div> <div style="display: flex;"> <div><%= link_to '内容を確認する', post %></div> <div><%= link_to '編集する', edit_post_path(post) %></div> <div><%= link_to '削除', post, method: :delete, data: { confirm: '削除します。よろしいですか？' } %></div> </div> </div> ```

投稿2020/04/06 11:45

編集2020/04/06 21:51

new1ro

総合スコア4528

ベストアンサー

<body>

本当に「body」ですか？
ただ、現在のコードでtbodyと書いてあったとしても今のだと下記のように出力されますので、対応が合っていません。

HTML
1
2<tbody>
3  <tr>
4    <td></td>
5    <td></td>
6    <td></td>
7 </tr>
8
9<tbody>
10  <tr>
11    <td></td>
12    <td></td>
13    <td></td>
14 </tr>
15<tbody>
16  <tr>
17    <td></td>
18    <td></td>
19    <td></td>
20 </tr>
21</tbody>
22

あとたぶん何かしらのフレームワークのVIEWなので、これでいいか分かりませんが、通常、tbodyはその名の通り、本体body部分全部を示しますので、ループなどで中身を作る時はtbodyの中を繰り返させます。

    <tbody>
   <% @posts.each do |post| %>
      <tr>
        <td><%= image_tag post.image_url(:thumb) if post.image.present?%></td>
        <td><%= post.title %></td>
        <td><%= post.body %></td>
        <td><%= link_to '内容を確認する', post %></td>
        <td><%= link_to '編集する', edit_post_path(post) %></td>
        <td><%= link_to '削除', post, method: :delete, data: { confirm: '削除します。よろしいですか？' } %></td>
      </tr>
    <% end %>
  </tbody>

投稿2020/04/06 11:44