Question

我有一个表，当用户对列进行排序时会重新填充。当用户单击标题上的列时，我会删除除th（标题）以外的所有行并重新添加新行。在我的表中，我定义了表的第一行（标题）的宽度。我还将表格设置为table-layout:fixed;。这使得所有列成比例并忽略列宽。如果我删除table-layout:fixed;列的宽度是正确的，但在重新填充表格时，宽度会发生变化，标题列也会移动。我如何保持列宽始终固定？

<table id="CartProducts" class="Center" style="table-layout:fixed; width:1000px;">
    <tr class="DefaulTableHeader">
        <th style="width:120px" class="Left ">
            <div class="ProductSort" data-property="Sku" data-sort="ASC">Sku</div>
        </th>
        <th style="width:120px" class="Left ">
            <div class="ProductSort" data-property="MfgPartNumber" data-sort="ASC">MfgPn</div>
        </th>
        <th style="width:290px" class="Left ">
            <div class="ProductSort" data-property="Description" data-sort="ASC">Description</div>
        </th>
        <th style="width:80px" class="Right ">
            <div class="ProductSort" data-property="Msrp" data-sort="ASC">MSRP</div>
        </th>
        <th style="width:80px" class="Right ">
            <div class="ProductSort" data-property="Cost" data-sort="ASC">Cost</div>
        </th>
        <th style="width:80px" class="Right ">
            <div class="ProductSort" data-property="Price" data-sort="ASC">Price</div>
        </th>
        <th style="width:30px" class="Center ">
            <div class="ProductSort" data-property="Status" data-sort="ASC">Status</div>
        </th>
        <th style="width:100px" class="Center ">Add</th>
        <th style="width:100px" class="Center ">Custom</th>
    </tr>

</table>

table-layout：fixed忽略td宽度

0 个答案: