javascript - HTML表格-使用JS的动态列数-使用通配符的固定布局-列消失

...对不起我的英语

这是我页面的example。我有一张固定布局的桌子，宽度为100％，一列“尽可能宽”。按钮正在添加列。当我拉伸页面宽度时，一切正常。但是，当我将列和拉伸结果区域添加到较小的宽度时，列“ 2”变得越来越小，为零。我可以解决这个问题吗？

码：

HTML：

<table>
<thead>
    <tr>
        <th class="short">1</th>
        <th>2</th>
        <th class="long">3</th>
    </tr>
</thead>
<tr>
    <td>dummy dummy dummy dummy </td>
    <td>dummy dummy dummy dummy dummy </td>
    <td>dummy dummy dummy dummy dummy </td>
</tr>
<tr>
    <td>dummy dummy dummy dummy </td>
    <td>dummy dummy dummy dummy dummy </td>
    <td>dummy dummy dummy dummy dummy </td>
</tr>

CSS：

table{
    table-layout:fixed;
    width:100%;
    min-width:200px;
}

td,th{
    border:1px solid black;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.short{
    width: 50px;
}

.long{
    width: 100px;
}

JS：

$('document').ready(function(){
    $('#addCol').click(function(){
        var c = $("table thead th").length;
        $("table thead tr").append("<th class=\"long\">" + (c+1) + "</th>");
        $("table tr:gt(0)").append("<td>dummy dummy dummy dummy dummy </td>");
    });
});

谢谢！

最佳答案

对于表格单元，最小宽度未定义。这给您两个选择：


每次添加列时都要计算像元宽度。当列太多时，这是将width属性添加到第二列的时候了。
将第二列作为最后一列。如果合并的宽度小于表的宽度，则最后一列将填充表的其余部分，即使此列具有width属性也是如此。