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