html 兩表同列寬

Question

我有兩個表第一個表有 tr 作為表的標題，第二個表有 tr td 表的內容我的實際代碼我已經為固定表頭提供了自定義滾動條。

所以我想根據 td 內容將 td 的寬度分配給 th。

例如。 如果第二個表格 td 的第 2 行文本得到增加，則根據 td 內容設置第一個表格的寬度。 我嘗試下面的代碼但不工作

 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

為此，您首先應該添加table-layout: fixed CSS 規則，然后如果您有該自定義滾動條的事件，您可以調用TableWidth ZC1C425268E68385D1AB5074FC像這樣setInterval(TableWidth, 1000)的固定間隔。 width設置如下：

 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>

此外，您應該以某種方式處理溢出， text-overflow: ellipsis可能是一種選擇