CSS: displaying table rows vertically

user_4645889 0
Viewed 55

I'm working on a very basic script in Ruby on Rails to display the records from a table, about CSS I'm using Flex but it is affecting the display (horizontally) of all items, this is the result:

showdata

The row in green is the header and the next one contains the data, the HTML code looks like this:

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>

My question is: is there anyway to display the rows inside the table in vertical mode? Thanks a lot for your comments.

flexbox css-tables css html
1 Answers

The problem is you are applying flex to every HTML element in the body when using body * selector.

The default setting for the flex display property is to layout the elements in the flex container horizontally, because the default value on a flex container is flex-direction: row;

For the items you want to have horiztonally add flex to the parent element. So if you only want the green items horizontally add the display:flex to the #tabledata element like this:

#tabledata {
    display: flex;
}

If you want a more specific answer I would change the code in your question and remove the ruby on rails code, and just add in dummy text so a simple code reproduction can be done by someone answering.

With HTML tables there is actually no reason to use flex at all, but again if you amend the question and get rid of the ruby code you'll get more specific answers.

user_192081360
Related