I apologize if this is something simple and if there are any issues with my question – I am very new to HTML/CSS along with collaboration tools such as this site.
I know these aren’t traditional HTML tables, but these are what I was able to work best with. Basically I have several tables that all have the same amount of a columns, but varying amounts of rows. This is causing them to have a ton of dead space on my page – such as the example below. Hopefully the pictures will explain better.
Below is 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>
<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>
<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>
</section>
<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>
</section>
<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>
</section>
<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>
</section>
<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>
</section>
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 have no clue to go about this – basically I just want any tables I have within my section to take advantage of all free space above and below. It doesn’t matter what order the tables are in, I also plan on having upwards of a dozen tables of varying rows (same columns).
Any help is appreciated!
2
Answers
This is known as the Masonry layout, you can learn more about how to build it here: CSS-only masonry layout
As your ‘tables’ each have the same width you could look at CSS column-count instead of grid [which until masonry comes along is a bit too fixed for your requirement].
This snippet has 7 ‘tables’, sets the column-count to 3 and puts a
break-inside: avoidon each ‘table’ so it doesn’t get split to the next column.