skip to Main Content

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


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

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search