I'm trying to build a complex 'table' style layout with Div and FlexBox. The page is using Bootstrap 5.2.x for the main layout.
I am trying to make the 'rows' the same height across. So the middle single row will stretch to the full height of the 'table' to the left.
I've tried a number of different variations of layouts and CSS but no success! :-(
Can anyone offer any advice or examples? This is the visual:
My table code is shown below.
<div id="shrpa-table-container" class="link-id-45594 cat-id-10223 tlcat-id-10223">
<h3>Aircraft information</h3>
<div class="row">
<div class="col col-md-5 shrpa-table">
<div class="shrpa-table-title"><h4>Aircraft size and type</h4></div>
<div class="shrpa-table-rows">
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">TurboProp</span><span class="shrpa-table-value"></span> </div>
<div class="shrpa-table-row-alt shrpa-table-pad">
<span class="shrpa-table-caption">Light Jet</span><span class="shrpa-table-value">Cessna Citation CJ2+, Cessna Citation CJ3+</span> </div>
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">Mid Jet</span><span class="shrpa-table-value">Embraer Legacy 450, Embraer Praetor 500</span> </div>
<div class="shrpa-table-row-alt shrpa-table-pad">
<span class="shrpa-table-caption">Super Mid</span><span class="shrpa-table-value"></span> </div>
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">Heavy Jet</span><span class="shrpa-table-value"></span> </div>
</div>
</div>
<div class="col col-md-2 shrpa-table">
<div class="shrpa-table-title"><h4>Aircraft age</h4></div>
<div class="shrpa-table-rows">
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-value">3 years</span> </div>
</div>
</div>
<div class="col col-md-5 shrpa-table">
<div class="shrpa-table-title"><h4>Aircraft independent ratings</h4></div>
<div class="shrpa-table-rows">
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">Argus rating</span><span class="shrpa-table-value">Platinum Rating</span> </div>
<div class="shrpa-table-row-alt shrpa-table-pad">
<span class="shrpa-table-caption">Wyvern rating</span><span class="shrpa-table-value">Wingman Pro</span> </div>
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">ISBAO</span><span class="shrpa-table-value"></span> </div>
<div class="shrpa-table-row-alt shrpa-table-pad">
<span class="shrpa-table-caption">Other rating</span><span class="shrpa-table-value"></span> </div>
</div>
</div>
</div>
Answers
To create a table-like layout with equal row heights using Bootstrap 5, you can leverage Flexbox to achieve the desired result. Here's how you can modify your code to achieve this:
<div id="shrpa-table-container" class="link-id-45594 cat-id-10223 tlcat-id-10223">
<h3>Aircraft information</h3>
<div class="row">
<div class="col-md-5 d-flex flex-column">
<div class="shrpa-table">
<div class="shrpa-table-title">
<h4>Aircraft size and type</h4>
</div>
<div class="shrpa-table-rows flex-grow-1">
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">TurboProp</span>
<span class="shrpa-table-value"></span>
</div>
<div class="shrpa-table-row-alt shrpa-table-pad">
<span class="shrpa-table-caption">Light Jet</span>
<span class="shrpa-table-value">Cessna Citation CJ2+, Cessna Citation CJ3+</span>
</div>
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">Mid Jet</span>
<span class="shrpa-table-value">Embraer Legacy 450, Embraer Praetor 500</span>
</div>
<div class="shrpa-table-row-alt shrpa-table-pad">
<span class="shrpa-table-caption">Super Mid</span>
<span class="shrpa-table-value"></span>
</div>
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">Heavy Jet</span>
<span class="shrpa-table-value"></span>
</div>
</div>
</div>
</div>
<div class="col-md-2 d-flex flex-column">
<div class="shrpa-table">
<div class="shrpa-table-title">
<h4>Aircraft age</h4>
</div>
<div class="shrpa-table-rows flex-grow-1">
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-value">3 years</span>
</div>
</div>
</div>
</div>
<div class="col-md-5 d-flex flex-column">
<div class="shrpa-table">
<div class="shrpa-table-title">
<h4>Aircraft independent ratings</h4>
</div>
<div class="shrpa-table-rows flex-grow-1">
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">Argus rating</span>
<span class="shrpa-table-value">Platinum Rating</span>
</div>
<div class="shrpa-table-row-alt shrpa-table-pad">
<span class="shrpa-table-caption">Wyvern rating</span>
<span class="shrpa-table-value">Wingman Pro</span>
</div>
<div class="shrpa-table-row shrpa-table-pad">
<span class="shrpa-table-caption">ISBAO</span>
<span class="shrpa-table-value"></span>
</div>
<div class="shrpa-table-row-alt shrpa-table-pad">
<span class="shrpa-table-caption">Other rating</span>
<span class="shrpa-table-value"></span>
</div>
</div>
</div>
</div>
</div>
</div>
In this code, I've added the d-flex class to each col-md-* column to make them flex containers. Additionally, I've added the flex-column class to ensure that each column's children stack vertically. The flex-grow-1 class ensures that each shrpa-table-rows div fills the remaining vertical space within its parent column.
With these modifications, the rows in each column should have equal heights, and the middle single row will stretch to the full height of the table to the left. Adjust the classes and styles as needed to fit your specific layout requirements.
