在tbody上使用empty（）可以调整整个表的宽度

Question

I am using jQuery to reload data inside the tbody . However, the header column width keeps resizing event though I put the fixed width for the columns. I am using Firefox.

Simple HTML table:

<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>

When the tbody.empty(), it automatically resizes the width of the header columns, which make the page looks ugly. and then when I reload the new rows, it resize it back to original width. Here is my Jquery code.

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

    };
});

Answer 1

This works, but I've not tested it in all browsers. Change HTML to:

<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>

You should avoid inline styles anyway. Add this CSS file:

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

That'll fix your problem, but again it's not cross-browser tested. You might consider allowing the resize.

Final result Fiddle

Answer 2

Your table style="width:95%;" is the problem. You are expecting a table with 8 X 200px = 1600px width, but your table should has 95% as width, which can be more or less than 1600px. If it be deferent, the headers will be ajusted automatic. I'm sorry about my english.

Answer 3

I had a similar problem with empty() function applied on ul element. HTML structure :

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

I have a JS timer which call an ajax function responsible to refresh the content of the list (ul). To update the list (ul) I started to empty it with the following code:

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

At each iteration, the column width was incremented even if content was the same. I finally replaced the content by the initial content by using replaceWith function and this time it was ok:

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