0

...对不起我的英语

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

谢谢！

4

2 回答 2

0

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

  1. 每次添加一列时计算单元格宽度。当列太多时，是时候为第二列添加宽度属性了。

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

于 2013-02-25T14:25:43.353 回答
0

将您的 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%;
}
于 2013-02-25T14:39:12.143 回答