html two table same column width

Question

I have two table 1st table have tr th as a heading of the table and second table have tr td the content of the table i my actual code i have given custom scrollbar for fixed table head.

So i want to assign the width of td as per td content to th.

Eg. If the second table td 2nd row text is get increase the first table th width set as per td content. I try below code but not working

 function TableWidth() { var i = 0; $(".TableList tr").find("td").each(function() { $($(".TableList tr").find("th")[i]).width( $(this).width() ); i++; }); } TableWidth();

 .TableList { width: 100%; }.TableList table { width:100%; }.TableList table tr th, .TableList table tr td { border: 1px solid #ccc; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="TableList"> <table> <tr> <th>Number</th> <th>Country</th> <th>List</th> <th>Format</th> <th>Date</th> </tr> </table> <table> <tr> <td>2123</td> <td>USA</td> <td>EXADAAAFAasdasd</td> <td>PDF</td> <td>24/03/2021</td> <tr> <tr> <td>2123</td> <td>USA</td> <td>EXADAAAFA</td> <td>PDF</td> <td>24/03/2021</td> <tr> <tr> <td>2123</td> <td>USA</td> <td>EXADAAAFAQEED</td> <td>PDFRQRFAFAFFAAFSF</td> <td>24/03/2021</td> <tr> <tr> <td>2123</td> <td>USA</td> <td>EXADAAAFAHSDFSFS</td> <td>PDF</td> <td>24/03/2021</td> <tr> </tr> </table> </div>

Answer 1

The first you should do for this to work is to add table-layout: fixed CSS rule for header table, then if you have an event for that custom scrollbar you can call TableWidth function in that event, if not, then it can be refreshed at aa fixed interval like this setInterval(TableWidth, 1000) . The width is set like this:

 function TableWidth() { const tlist = document.querySelector('.TableList'); const th = tlist.querySelectorAll('table:first-child th'); const td = tlist.querySelectorAll('table:last-child tr:first-child td'); th.forEach((th, i) => { th.style.width = getComputedStyle(td[i]).width; }); }; TableWidth();

 .TableList { width: 100%; }.TableList table { width:100%; }.TableList table tr th, .TableList table tr td { border: 1px solid #ccc; }.TableList table:first-child { table-layout: fixed; }.TableList table th { overflow: hidden; text-overflow: ellipsis; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="TableList"> <table> <tr> <th>Number</th> <th>Country</th> <th>List</th> <th>Format</th> <th>Date</th> </tr> </table> <table> <tr> <td>2123</td> <td>USA</td> <td>EXADAAAFAasdasd</td> <td>PDF</td> <td>24/03/2021</td> <tr> <tr> <td>2123</td> <td>USA</td> <td>EXADAAAFA</td> <td>PDF</td> <td>24/03/2021</td> <tr> <tr> <td>2123</td> <td>USA</td> <td>EXADAAAFAQEED</td> <td>PDFRQRFAFAFFAAFSF</td> <td>24/03/2021</td> <tr> <tr> <td>2123</td> <td>USA</td> <td>EXADAAAFAHSDFSFS</td> <td>PDF</td> <td>24/03/2021</td> <tr> </tr> </table> </div>

Also, you should deal somehow with overflow, text-overflow: ellipsis may be an option