How can I remove the excess space above and below tables that have differing numbers of rows?

Forgive me if my question seems basic or if there are any errors in it. I am new to HTML/CSS and collaboration tools like this platform.

While I understand that these are not your typical HTML tables, they are what I've found to be the most effective for my needs. The issue I'm facing is that I have multiple tables with the same number of columns but different numbers of rows. This is causing a lot of unnecessary white space on my page, as shown in the example below. Hopefully, the images will clarify this further.

Below you will find an example of my HTML & CSS:

HTML:

  <section class="table">
        <div class="goaltable_title"><h2>Goal Table Category</h2></div>
      <div class="goaltable_header">
        <div class="check_header"><p>Completed:</p></div>
        <div class="objective_header"><p>Objective:</p></div>
        <div class="view_header">Additional Information:</div>
      </div>
      <div class="row">
        <div class="check"><input type="checkbox"></div>
        <div class="objective">row 1</div>
        <div class="view"><button>View</button></div>
      </div>
      // more rows...
    </section>

    // more sections...

CSS:

body {
  padding: 0px;
  margin: 0;
}
main {
  padding: 0px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: 0fr;
  align-content: start;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.table {
  display: inline-block;
  width: 30rem;
  padding: 0px;
  margin: 1.5%;
  height: fit-content;
}

Desired / Expected: Desired / Expected

Actual: Actual:

I am unsure how to address this issue - essentially, I want all tables within my section to utilize the available space efficiently. The order of the tables doesn't matter, and I anticipate having several tables with varying numbers of rows but the same columns.

Any assistance would be greatly appreciated!

Answer №1

The design referred to as Masonry layout is explained in detail on this page: CSS-only masonry layout

Answer №2

If all your 'tables' have the same width, you might consider using CSS column-count instead of grid [unless masonry functionality is needed for more flexibility].

This code snippet includes 7 'tables', sets the column-count to 3, and applies break-inside: avoid to each 'table' to prevent them from breaking across columns.

<main>
  <section class="table">
    <div class="goaltable_title">
      <h2>Goal Table Category</h2>
    </div>
    <div class="goaltable_header">
      <div class="check_header">
        <p>Completed:</p>
      </div>
      <div class="objective_header">
        <p>Objective:</p>
      </div>
      <div class="view_header">Additional Information:</div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 1</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 2</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 3</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 4</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 5</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 6</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 7</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 8</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 9</div>
      <div class="view"><button>View</button></div>
    </div>
    <div class="row">
      <div class="check"><input type="checkbox"></div>
      <div class="objective">row 10</div>
      <div class="view"><button>View</button></div>
    </div>
  </section>

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

When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...

``Are there any thoughts on how to troubleshoot display problems specifically on mobile

Whenever I use Safari on iOS for my web application, I encounter strange rendering issues. It's odd because the majority of the time everything functions as it should, but every now and then these bugs crop up with no discernible pattern. Examples th ...

What causes the disparity in functionality between simple html and css in an Angular 2 project compared to a vanilla html website?

When incorporating the following html/css into a new Angular project created with Angular CLI using 'ng new ProjectName', I encountered issues. Despite adding the CSS to app.component.css or styles.css and the HTML to app.component.html, the Angu ...

Scrapy Library's Response.css function fails to retrieve data from API, resulting in an empty list

scrapy shell 'https://www.samsung.com/in/smartphones/galaxy-m/' fetch('https://searchapi.samsung.com/v6/front/b2c/product/finder/gpv2?type=01010000&siteCode=in&start=1&num=12&sort=onlineavailability&onlyFilterInfoYN=N& ...

Ensure that the div is styled with a white background and positioned next to another div with a right margin

I have a white-colored div that needs to be positioned next to another element on a webpage. Additionally, I need a paragraph placed on top of this div for information purposes. Please refer to the following link to see what I am trying to achieve: https:/ ...

Need at least one form input field out of three to be completed

Currently, I am developing a database program where users are required to enter some of their contact information. <form action="add_action.php" method="POST"> <div class="modal-body"> Name: <br> ...

The website appears to be loading in a unique way on mobile upon the second loading

While developing my personal website, I encountered a bug that occurs when accessing the site on my Android phone using Firefox or Chrome. The issue arises when the page initially loads correctly, but upon refreshing, the layout is displayed differently. ...

Placing the child element behind the parent element's parent does not seem to be affected by the `z-index`

Please help! I've been struggling to get the <span> to appear behind the #sideBar using z-index: -3, but it's not working as expected.</p> body { margin: 0px; font-family: "Signika Negative", sans-serif; background-color: #25 ...

Issues arise when trying to integrate iframes with Ionic and AngularJS, as they

Using iframes in my ionic app to display webpages within the application has presented a challenge. This is what I currently have implemented: <iframe class= 'webPage' name= "eventsPage" ng-src="{{object.url}}"></iframe> The issue ...

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

In my current project, I have a unique challenge. I am working with a list of flattened div elements and unfortunately, I am unable to edit the HTML markup to add any structures. The first div in the list is quite long, and I would like to place it in a se ...

The selected custom button color is not appearing as intended when viewed in the

I'm currently in the process of creating a small webpage dedicated to showcasing my top favorite Zelda bosses using HTML, CSS, and Bootstrap 5. To make it more personalized, I decided to veer away from the standard Bootstrap button colors and create m ...

What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how ...

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

My goal is to maintain the checked items as checked when searching for another item in ion-searchbar. While I have managed to keep the checked items, the checkmark icon does not stay checked. What I aim for is to retain the checked state of all food items ...

An inclusive CSS-compatible calendar control for ASP.NET

I am currently using the Calendar control provided by .NET but I have encountered issues with how it renders HTML in certain situations. Unfortunately, this is hard-coded and cannot be changed. It seems that the Calendar control has not been updated in .NE ...

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

Tips on altering the h2 color when hovering using h2:hover:after

I'm attempting to alter the color of my h2 element using h2:hover:after. Can someone guide me on how to achieve this? Here is what I have tried so far. h2 { font-size: 25px; } h2:after { content: ""; display: block; width: 14%; padding-to ...

Issue with the JQuery Lightbox 2 Plugin

I'm currently in the process of developing a gallery using jQuery Lightbox 2 (visit the plugin page here). I am encountering an issue where the navigation entries remain visible even when an image is selected (view example here). The navigation is cre ...

Ways to retrieve parameters using $_GET

I am having trouble retrieving the parameter $_GET with a value that contains the character: '#'. Here is the code I am using: <iframe src="http://localhost/wp352/wp-content/plugins/heloworld/templates/options-rte.php?text_content=<span s ...

When the bootstrap 5 dropdown is activated, flex wrap functionality triggers vertical scrolling

Every time I click on the dropdown, it causes a vertical scroll instead of popping out like a regular dropdown. I want to maintain the horizontal scroll while fixing this issue. Any suggestions on how to solve this problem? Demo: https://jsfiddle.net/d3j ...

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...