Set html table column's width based on header width

Question

I am trying to get my html table working with vertical scrollbar for tbody based on SO Post. I got the scrollbar working but struggling to dynamically set the width of the columns. The suggested SO answer setting the width of the header columns based on the width of tbody columns. I want to do exactly opposite. I am trying to set width of tbody columns ( first row only) based on header column width.

JSfiddle DEMO

html

<table class="table mytable">
    <thead>
        <tr>
            <th style="border-top:2px solid #ddd"></th>
            <th colspan="4" style="text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd">Group 1</th>
            <th colspan="4" style="text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:2px solid #ddd">Group 2</th>
            <th style="border-top:2px solid #ddd">Group 3</th>
        </tr>
        <tr>
            <th style="width:200px">Col 1</th>
            <th style="width:150px;border-left:1px solid #ddd">Col 2</th>
            <th style="width:150px">Col 3</th>
            <th style="width:150px" class="td-md">Col 4</th>
            <th style="width:150px">Col 5</th>            
            <th style="width:150px;border-left:1px solid #ddd">Col 6</th>
            <th style="width:150px">Col 7</th>
            <th style="width:150px">Col 8</th>
            <th style="width:150px">Col 9</th>
            <th style="width:150px;border-left:1px solid #ddd">Col 10</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>
        <tr>
            <td>A12345</td>
            <td>1254</td>
            <td>200</td>
            <td>43243</td>
            <td>432</td>
            <td>4323</td>
            <td>4324</td>
            <td>434</td>
            <td>4343244</td>
            <td>4343244</td>
        </tr>        
    </tbody>
</table>

Javascript

$(function () {

       // Change the selector if needed
    var $table = $('.mytable'),
        $bodyCells = $table.find('thead tr:nth-child(2) th'),
        colWidth;
    var alertWidth = '';


    // Get the header columns width array
    colWidth = $bodyCells.map(function() {
            var $this = $(this);
        alertWidth += $this.width() + ","; 
        return $this.width();
    }).get();

        alert(alertWidth);

    // Set the width of first row's column
    $table.find('tbody tr:first td').each(function(i, v) {
        //alert(colWidth[i]);
        $(v).width(colWidth[i]);
    });

})

css

 thead, tbody {
        display: block;
    }

    tbody {
        height: 100px; /* Just for the demo          */
        overflow-y: auto; /* Trigger vertical scroll    */
        overflow-x: hidden; /* Hide the horizontal scroll */
    }

ISSUE
Issue here is jquery's width() function does not return the same value as what is set on th. If i inspect html in the browser the width property of td does not match with corresponding th I have tried .css("width") as well with noluck. I

thead doesn't scroll but tbody does or might, you should mind this too. — G-Cyrillus, Apr 12 '19 at 21:39

dreijntjens · Answer 1 · 2019-04-12T22:04:48.810

-2

Remove the java-script and replace all css with this:

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:200px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

edited Apr 12 '19 at 22:04

answered Apr 12 '19 at 21:28

dreijntjens

4,577
26
28

with your suggestion i dont get vertical scrollbar https://jsfiddle.net/f8r5na3j/ – LP13 Apr 12 '19 at 21:33
Updated my answer and added the code to create the vertical scrollbar – dreijntjens Apr 12 '19 at 21:45
that will add the scrollbar to entire table not just for tbody. you may want to check SO link i have in OP – LP13 Apr 12 '19 at 21:49

Set html table column's width based on header width

1 Answers1