Forum How do I...?

Equalize border size for 2-column layout with unequal row counts per column

JHerrick
I have a <div> containing a <table> using a 2-column layout. The table rows are segregated into multiple <tbody> segments containing unequal row counts. Our goal is to avoid page breaks inside a tbody, and to have the tbody segments balanced across both columns on the page. We have that part working wonderfully.

However we'd also like the resulting column borders to "equalize" with the smaller column's bottom border extending down to where the larger column's bottom border is on the page. See attachments for a mockup.

Any ideas on how this can be accomplished?
  1. Table layout current behavior.png134.4 kB
    Current layout behavior
  2. Table layout desired behavior.png159.8 kB
    Desired layout behavior