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!