0

...そして私の英語でごめんなさい

これが私のページの例です。レイアウトが固定され、幅が100％で、1つの列が「できるだけ広い」テーブルがあります。ボタンは列を追加しています。ページ幅を拡大すると、すべてが正常に機能します。しかし、列を追加して結果領域をより小さな幅に拡大すると、列「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

テーブル セルの最小幅は定義されていません。これにより、次の 2 つのオプションが残ります。

  1. 列を追加するたびにセル幅を計算します。列が多すぎる場合は、2 番目の列に width プロパティを追加します。

  2. 2 番目の列を最後の列にします。この列に width 属性がある場合でも、結合された幅がテーブルの幅よりも小さい場合、最後の列がテーブルの残りの部分を埋めます。

于 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 に答える