2

パーセンテージ幅のテーブルが必要で、各列にもパーセンテージ幅があります。use css を使用して、overflow:hidden; を実行したいです。テキストオーバーフロー:省略記号; ただし、特定の列内では機能していないようです。

ここに私が持っているものがあります:

<table style='width:50%;'>
    <thead>
    <tr>
        <td style='width:15%;'>column 1</td>
        <td style='width:15%;'>column 2</td>
        <td style='width:70%;'>column 3</td>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td style='border:1px solid red;'>
                <div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div>
            </td>
            <td style='border:1px solid red;'>
                <div style='overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'>this is some data 1</div>
            </td>
            <td style='border:1px solid red;'>No hiding</td>
        </tr>
    </tbody>
</table>

ページが小さくなると、最初の 2 つの列ではなく、3 番目の列が小さくなり、期待どおりに省略記号と縮小が表示されます。

ここにjsfiddleがあります。

4

1 に答える 1

3 
table {
    table-layout:fixed;
}

これはあなたが探しているものかもしれません。

http://jsfiddle.net/wGznj/2/

「テーブル幅アルゴリズム」部分の詳細については、@ http://reference.sitepoint.com/css/tableformatting

「固定テーブル レイアウト アルゴリズムでは、列とテーブルの幅は、テーブルのセルの内容によって制御されません。代わりに、各列の幅は次のように決定されます。

  • 幅が自動設定されていない列オブジェクトは、その列の幅を設定します。
  • 幅が auto でない最初の行のセルは、それが属する列の幅を設定します。セルが複数の列にまたがる場合、幅は列に分割されます。
  • 残りの列は、残りの水平方向のスペースを均等に分割し、境界線またはセルの間隔を差し引いたものです。」
于 2013-05-06T18:56:11.290 に答える