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

HTML tables - dynamic coulmn count with JS - fixed layout with wildcard - column disappear

本文关键字：通配符 布局 消失 -列 使用 JS 动态 HTML 库仑计      更新时间：2023-09-26

。。。很抱歉我的英语

这是我的页面示例。我有一张固定布局的桌子，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>");
    });
});

谢谢！

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

  1. 每次添加列时计算单元格宽度。如果列太多，现在是向第二列添加width属性的时候了。

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

将css部分更新为这个并检查，使用%设置宽度是实现这一点的最佳方式。

table{
    table-layout:fixed;
    width:100%;
}
td,th{
    border:1px solid black;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width:100%;
}
.short{
    width: 50%;
}
.long{
    width: 150%;
}
相关文章：