'Table with fixed width and height for cells, but ability to expand each row as required

I have a 12 column bootstrap table whose content per column varies considerably. Some columns only store a word, while others paragraphs etc.

I would like to be able to specify the width of each cell and height of rows to keep the table looking uniform. However, to do this I would also need some way to expand each row as desired to show the full contents. I am defining the table in html

<table id="table" class="claimLibTable" data-toggle="table" 
                        style="background-color: white;"
                        data-advanced-search="true"
                        data-show-footer="true" 
                        data-pagination="true"   data-page-size="10" 
                        data-show-export="true"  
                        data-search="true"       data-show-search-button="true"
                        data-show-refresh="true" data-show-fullscreen="true" 
                        data-total-field="count" data-data-field="items"
                        data-resizable="true"
                        data-id-table="advancedTable"
                        data-filter-control="true"
                        data-filter-show-clear="true"
                        >
                    </table> 

And I am populating my table in JS as the data is coming through an API call.

$('#table').bootstrapTable({
    url: host + 'claimdb/all',
    exportDataType: "all",
    exportTypes: ["excel"],
    columns: [  
        {
            sortable: 'true',
            field: 'Doc_name',
            title: 'Document Name',
            formatter: 'docNameFormatter',
            filterControl: 'select'
        }, 
        { ...

I would love if I could do something similar to https://stackoverflow.com/a/59943847/6049784 but it to expand the actual row rather than a subgroup



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source