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

Question

...对不起我的英语

这里是 example我的页面。我有一个固定布局、100% 宽度和一列“尽可能宽”的表格。按钮正在添加列。当我拉伸(stretch)页面宽度时，一切正常。但是当我添加列并将结果区域拉伸(stretch)到更小的宽度时，列“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>");
    });
});

谢谢!

Answer 1

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

1. 每次添加列时计算单元格宽度。当列数过多时，就该为第二列添加宽度属性了。

2. 将第二列设为最后一列。如果组合宽度小于表格宽度，最后一列将填充表格的其余部分，即使此列具有宽度属性也是如此。