Ways to display the <tbody> section in a grid layout

How can I display elements in a grid view (horizontally, 3-4 elements per row) with adequate spacing between them? I attempted to use margin but it was ineffective.

This is my HTML.erb code:

<h1> Entries </h1>

<table>
<% @listings.each do |listing| %>
  <tbody>
    <tr>
     <th><%= listing.title %></th>
    </tr>
    <tr>
     <td><%= listing.text %></td>
    </tr>
    <tr>
     <td><%= listing.zipcode %>, <%= listing.city %></td>
    </tr>
    <tr>
     <td><%= link_to 'View', listing_path(listing) %></td>
     <td><%= link_to 'Edit', edit_listing_path(listing) %></td>
     <td><%= link_to 'Delete', listing_path(listing),
                                method: :delete,
                                data: { confirm: 'Are you sure?'} %></td>
    </tr>
  </tbody>
<% end %>
 </table>

  <%= link_to 'New Entry', new_listing_path %>

This is my CSS file:

...
table {
   border-collapse: collapse;
}

tbody {
  border: 3px solid #000;
}

Answer №1

To enhance the appearance of the <td> tag, consider adding styles for border and/or padding. Here is an example to get you started:

td {
  border: 30px solid #040;
  padding: 20px;
}

Feel free to adjust these values until you achieve the desired outcome.

Tip: Utilize developer tools to inspect the element and visualize the impact of different border and padding values on your view.

https://i.sstatic.net/SsnWu.png

Answer №2

I encountered a problem and found a solution, but now I am facing another issue. In my table, I want to display 3 elements per row consistently. However, after the first row with 3 elements, the second row only has 1 element and the third row has 3 elements again.

I have tried implementing a solution in my HTML file:

<table>
    <% $c = 0 %>
    <% @listings.each do |listing| %>
        <% puts $c %>
        <% if $c == 3 %>
            <tr>
                <td>
                    <strong><%= listing.title %></strong>
                    <br />
                    <%= listing.text %>
                    <br />
                    <%= listing.zipcode %>, <%= listing.city %>
                    <br />
                    <%= link_to 'View', listing_path(listing) %>
                    <%= link_to 'Edit', edit_listing_path(listing) %>
                    <%= link_to 'Delete', listing_path(listing),
                        method: :delete,
                        data: { confirm: 'Are you sure?'} %> </td>
                <% $c = 0 %>
            </tr>
        <% else %>
            <% $c += 1 %>
            <td>
                <strong><%= listing.title %></strong>
                <br />
                <%= listing.text %>
                <br />
                <%= listing.zipcode %>, <%= listing.city %>
                <br />
                <%= link_to 'View', listing_path(listing) %>
                <%= link_to 'Edit', edit_listing_path(listing) %>
                <%= link_to 'Delete', listing_path(listing),
                    method: :delete,
                    data: { confirm: 'Are you sure?'} %> </td>
            <% end %>
        <% end %>
    </table>

Additionally, I made some styles changes in my CSS file:

table {
    border-spacing: 15px;
}

td {
    border: 3px solid black;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restrict form submission when minimum and maximum requirements are not met using JavaScript

I'm currently using JavaScript to show an error message when a user clicks on the form submit button and the entered number is not within the specified min and max range. The problem I am facing is that even when the submit button is clicked, the form ...

Submenu fails to remain expanded

Having a minor issue with my dropdown menu. Whenever I hover over a link, the submenu pops out briefly but doesn't remain open. The issue seems to be related to the "content" div element, as removing it makes the menu functional. However, I can&apo ...

jQuery deduct a value from a given value

i have a full duration that is divided into multiple sections, the user needs to input the duration for each section i would like the system to calculate and display the remaining duration from the full duration, regardless of whether the user fills out ...

Using jQuery to alter the colors of a dynamically generated table based on its content

I am currently working with a div element that dynamically generates a table. Although I can generate the table and use on("click" or "mouseover", function) to achieve certain results, I need the table to update as it loads. In my initial attempts, I tri ...

Is it appropriate to incorporate the new <main> element in HTML5 yet?

Back on the 16th of December, a new HTML5 extension specification was sent off to the W3C for review. This extension focuses on the <main> element and you can check it out here. Here's a summary: This particular spec builds upon the existing HT ...

Methods for sending data from a title to a href link

Can someone help me figure out how to retrieve the value of $number from a page called pagination.php? echo "<span class='pagination'><a href='pagination.php' > ".$number." </a></span>"; I'm not sure h ...

Showing code snippets with possible markup or malicious content as plain text strings

I am facing a challenge with a table on my webpage where values are added through a textbox in a popup modal. However, when I try to add the string ); to the textbox, it triggers a popup instead of being displayed innocuously in its original format on the ...

I prefer a dynamic navbar that isn't fixed in place

I'm trying to make my navbar scroll along with the page content, without any fancy styling like disappearing effects. So far, I haven't been able to achieve this using Bootstrap 4. Here is how it currently appears: https://i.sstatic.net/R5gDq.p ...

Struggling to align a button in the middle of an HTML form using flexbox - see code snippet below

Hey everyone, I’m having trouble with centering my button within the flexbox container with the class "hero". Any thoughts on why this might be happening? The button appears below the email form but is aligned to the left of it (starting at the same pos ...

Adjust the appearance of an element that is being inserted using .before() by utilizing a variable

Using the jQuery function .before(), I am creating an element in this format: d.children().first().before("<div class='test-div'><span class='test-span'>" + text + "</span></div>") I want to style the span dyna ...

Display method JSONized

Looking for guidance on improving code efficiency and best practices. In my current project, I am working with a JSON Array structured like this: [ { "Date": "2014-07-16", "DiscPoint": "Description 1", "DisBy": "Person 1" ...

Styling a div to wrap around an image

I'm working with an image element that has the style attribute set to style='width:40%;height:40%'. My goal is to add a div around this image that will automatically adjust its size to wrap around the image. However, when I try inserting the ...

Retrieve SQL data and store it in a JavaScript variable

Need assistance with fetching data from SQL and storing it in a JavaScript variable. I have already connected PHPMyAdmin to my website. I am attempting to retrieve two variables (date) from my SQL table. JAVASCRIPT: var countdown_48 = new Date; countdow ...

Having Issues with JSFiddle: Difficulty with executing a basic onclick event to display a string

Having trouble with an onclick event: Simply click the button to run a function that displays "Hello World" in a paragraph element with id="demo". <button onclick="myFunction()">Click me</button> <p id="demo"></p> <script> ...

Issue with Jquery's .html() function not functioning properly when trying to select HTML

I am currently working on a piece of code that looks like this: $price = $(element) > $('.main_paket_price').attr('name'); alert($price); Basically, I am trying to select an element inside element which has the class main_paket_pri ...

Ways to prevent a timeout when the score exceeds 1000

Could someone help me with clearing the interval and resetting the score in my code? It seems to be working fine, but when the score goes over 1000 and I hit reset, it doesn’t reset completely. I've tried placing the clearTimeout functions before e ...

Works well with Bootstrap but not compatible with other frameworks

Looking for assistance with a code within Bootstrap (HTML and CSS). I have been trying to create a dropdown menu (burger menu) following the Bootstrap Documentation, but I am unable to expand the burger menu (Dropdown). I have tested it on both Firefox an ...

Customizing the width of the JQuery $ui.progressbar by overriding its properties

After spending some time, I successfully overrode the function that controls the width of the progress bar element in the jQuery UI widget version 1.12.1 from September 14, 2016. Initially, I needed the progress bar to completely fill a column in a table. ...

Stop elements from overextending within their parent container

I am facing an issue with two divs that are wrapped inside a container div. The bottom div contains a dynamically filled table, which determines the overall width of all the divs. On the top div, I want to display several small red blocks that need to tak ...

Collapsible Span with Maximum Width in Unique Twitter Bootstrap

UPDATED If I assign a max-width value to the .container element, it disrupts the alignment of my spans. <div class="container" style="max-width:940px"> <div class="row"> <div class="span4" style="background-color:#F00">1</div& ...