I've been grappling with trying to construct a table using Bootstrap 4 grid container. While everything from styling to alignment seems to be in place, there's one nagging issue: the table doesn't adhere to the grid container as anticipated. It appears that only the first column stretches/shrinks when the browser window is resized.
My attempt at using the display property for building the table was successful in addressing alignment challenges, but incorporating col-# as class names for the columns doesn't seem to yield the desired outcome.
.my-table {
border: 1px solid grey;
display: table;
padding: 0;
}
.my-table-row-header {
display: table-header-group;
height: 50px;
}
.first-header-column {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.my-table-body {
display: table-row-group;
}
.my-table-row {
height: 50px;
border-left: 1px solid grey;
border-bottom: 1px solid grey;
display: table-row;
}
.row-cell {
display: table-cell;
vertical-align: middle;
border-right: 1px solid grey;
}
.c-column {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-left: 11px;
padding-right: 11px;
}<div class="container-fluid no-gutters">
<div class="my-table col-9 table">
<div class="my-table-row-header row">
<div class="first-header-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-body">
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
<div class="my-table-row row">
<div class="first-column col-1 row-cell">
<span class="c-column">c</span>
</div>
<div class="second-column col-4 row-cell">
<span>text</span>
</div>
<div class="third-column col-4 row-cell">
<span>text</span>
</div>
</div>
</div>
</div>
</div>Jsfiddle: https://jsfiddle.net/4zn5oby6/2/
If you resize your browser, you'll notice the first column adjusting accordingly. I'm hopeful it will strictly adhere to the size constraints of the grid container.
P.S. Given that my table comprises other components beyond text, I prefer retaining the display properties for ensuring precise styling. Your assistance would be greatly appreciated. Thank you.