在tbody上使用empty（）可以調整整個表的寬度

Question

我正在使用jQuery重新加載tbody數據。 但是，盡管我為列設置了固定的寬度，但標題列的寬度仍會繼續調整大小。 我正在使用Firefox。

簡單的HTML表：

<table style="width:95%;" border="1" align="center" >
    <thead>
        <tr>
        <td class="header" style="width:20%">ProductFamily
            <select onchange="selectCategoryChange()">
                <option "1">1</option>
                <option "2">2</option>
            </select>
        </td>
        <td class="header" style="width:20%">ProductNum</td>
        <td class="header" style="width:30%">ProductDesc</td>
        <td class="header" style="width:5%">DT Rate</td>
        <td class="header" style="width:5%">List Rate</td>
        <td class="header" style="width:5%">Man Hour Unit</td>
        <td class="header" style="width:5%">Precall</td>
        <td class="header" style="width:5%">SOW</td>
        <td class="header" style="width:5%">Box</td>
         </tr>
    </thead>
    <tbody  id="tbodyDataRow">
        <!-- Data Rows Here -->
    </tbody>
</table>

當使用tbody.empty（）時，它會自動調整頁眉列的寬度，從而使頁面看起來難看。 然后當我重新加載新行時，它將其大小重新設置為原始寬度。 這是我的Jquery代碼。

$(document).ready(function() {
    selectCategoryChange = function()
    {
        var tbody = $("#tbodyDataRow");
        tbody.empty();

    };
});

Answer 1

這可行，但是我沒有在所有瀏覽器中都對其進行過測試。 將HTML更改為：

<table border="1" align="center">
    <thead>
        <tr>
            <th>ProductNum</th>
            <th>Product</th>
            <th>DT Rate</th>
            <th>List Rate</th>
            <th>Man Hour Unit</th>
            <th>Precall</th>
            <th>SOW</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="tbodyDataRow">
        <!-- tbody Content -->
    </tbody>
</table>

無論如何，您都應避免使用內聯樣式。 添加此CSS文件：

table {
    border: 1px solid black;
}
.header {
    background-color: #ccc;
    font-weight: bold;
    min-width: 200px;
}

這樣可以解決您的問題，但是再次，它沒有經過跨瀏覽器的測試。 您可以考慮允許調整大小。

最終結果小提琴

Answer 2

您的表格style="width:95%;" 是問題。 您期望表格的寬度為8 X 200px = 1600px ，但是表格的寬度應為95％，可以大於或小於1600px。 如果不同，則標題將自動調整。 我的英語不好意思。

Answer 3

我對ul元素應用了empty（）函數時遇到了類似的問題。 HTML結構：

<table>
  <tr>
    <td>
        <ul id="list"></ul>
    </td>
    <td>
     ...
    </td> 
  </tr>

我有一個JS計時器，它調用ajax函數來刷新列表（ul）的內容。 要更新列表（ul），我開始使用以下代碼將其清空：

$("#list").empty();

在每次迭代中，即使內容相同，列寬也會增加。 最后，我通過使用replaceWith函數將內容替換為初始內容，這次還可以：

$("#list").replaceWith('<ul id="list"></ul>');