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可能是一种选择