CSS：垂直显示 table 行

Question

我正在 Rails 上的 Ruby 中编写一个非常基本的脚本来显示来自 table 的记录，关于 CSS 我正在使用 Flex 但是它正在影响所有项目的显示（水平），这是结果：

绿色行是 header，下一行包含数据，HTML 代码如下所示：

html, body{
         margin: 0;
         background-color: #3a3a3a;
     }
    
     body *{
         color: white;
         font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
         display: flex;
         justify-content: center;
         flex-direction: row;
         border-radius: 5px;
         align-items: center;
     }
    
     div {
         margin-left: 20px;
     }
    
     input {
         color: black;   
     }
    
     h1{
        font-size: 2.5em;
    }
    .description{
        background-color: rgba(9, 0, 0, 0.199);
        padding: 2em;
        font-size: 2em;
        max-width: 600px;
    }
    .meta *{
        display: flex;
        background-color: yellow;
    }
    .links *{
        margin-top: 10px;
        color: white;
        border-radius: 5px;
        font-weight: bold;
        background-color: rgb(31, 55, 133);
        margin: 5px;
        padding: 5px;
        text-decoration: none;
    }
    
    #tabledata {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }
      
      #tabledata td, #tabledata th {
        border: 1px solid #ddd;
        padding: 8px;
      }
      
      #tabledata tr:nth-child(even){background-color: #f2f2f2;}
      
      #tabledata tr:hover {background-color: #ddd;}
      
      #tabledata th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #04AA6D;
        color: white;
      }

 <p id="notice"><%= notice %></p>
    
    <h1>Productlines</h1>
    
    <table id="tabledata">
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Available?</th>
          <th colspan='3'>Options</th>
        </tr>
      </thead>
    
      <tbody>
        <% @productlines.each do |productline| %>
          <tr>
            <td><%=productline.name %></td>
            <td><%=productline.isactive %></td>        
            <td class="links"><%= link_to 'Show', productline %></td>
            <td class="links"><%= link_to 'Edit', edit_productline_path(productline) %></td>
            <td class="links"><%= link_to 'Destroy', productline, method: :delete, data: { confirm: 'Are you sure?' } %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
    
    <br>
    
    <span class="links"><%= link_to 'New Productline', new_productline_path %></span>

我的问题是：是否可以在垂直模式下显示 table 内的行？非常感谢您的评论。

Answer 1

问题是您在使用 body * 选择器时将 flex 应用于 body 中的每个 HTML 元素。

flex显示的默认设置属性是水平布局flex容器中的元素，因为flex容器的默认值是flex-direction: row;

对于您想要水平放置的项目，将 flex 添加到父元素。因此，如果您只想要绿色项水平添加 display:flex 到 #tabledata 元素，如下所示：

#tabledata {
    display: flex;
}

如果你想要一个更具体的答案，我会更改你问题中的代码并删除 rails 代码上的 ruby，然后添加虚拟文本以便可以完成简单的代码复制有人回答。

使用 HTML 表实际上根本没有理由使用 flex，但是如果您再次修改问题并摆脱 ruby 代码，您会得到更多具体答案。

CSS：垂直显示 table 行

CSS: displaying table rows vertically

html

css

css-tables

flexbox