I have tables with a varying amount of rows, how do I eliminate the dead space above and below the different tables as a result?

Question

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!

score 0 · Answer 1 · answered Apr 26 '23 at 13:30

0

This is known as the Masonry layout, you can learn more about how to build it here: CSS-only masonry layout

answered Apr 26 '23 at 13:30

AngYC

3,051
6
20

score 0 · Answer 2 · answered Apr 26 '23 at 16:54

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: avoid on each 'table' so it doesn't get split to the next column.

<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>

  <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>
  <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>
</main>
<style>
  body {
    padding: 0px;
    margin: 0;
  }
  
  main {
    padding: 0px;
    margin: 0 auto;
    column-count: 3;
  }
  
  .table {
    width: 30rem;
    padding: 10px;
    margin: 1.5%;
    height: fit-content;
    break-inside: avoid;
  }
</style>

I have tables with a varying amount of rows, how do I eliminate the dead space above and below the different tables as a result?

2 Answers2