I've been experimenting with the bootstrap 4 grid to create a table-like layout. By using the following CSS code, I was able to achieve the desired behavior:
.data-table{
display : table ;
padding : 0em;
}
.data-table > .row{
display : table-row ;
}
.data-table > .row > * {
display : table-cell ;
white-space : nowrap ;
}
The .data-table is contained within a .container div.
For the column width, I used the "col-auto" class to adjust it based on the data inside. Everything was working smoothly until I attempted to hide some columns on medium to small devices using the "d-none d-lg-block" classes in bootstrap 4. This caused the entire table layout to become buggy. The issue seems to arise when applying this class to two adjacent columns. My current setup looks like this:
<div class "col-auto d-none d-lg-block"><!--code--></div>
<div class "col-auto">--code--</div>
<div class "col-auto d-none d-lg-block"><!--code--></div>
While this setup functions well for the most part, I'm now seeking solutions on how to resolve these bugs and explore alternative approaches.