Question

...对不起我的英文

以下是我页面的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>");
    });
});

谢谢！

Answer 1

对于表格单元格，最小宽度未定义。这为您提供了两个选项：

每次添加列时计算单元格宽度。如果列太多，则需要将width属性添加到第二列。
使第二列成为最后一列。如果组合宽度小于表格的宽度，则最后一列填充表格的其余部分，即使此列具有宽度属性。

Answer 2

将css部分更新为此并检查，使用％设置宽度是实现this的最佳方式。

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%;
}

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

2 个答案: