161

次の例を考えてみましょう: (ライブデモはこちら)

$(function() {
  console.log("width = " + $("td").width());
});
td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

出力は:width = 139で、省略記号は表示されません。

ここで何が欠けていますか？

4

12 に答える 12

108

どうやら、追加：

td {
  display: block; /* or inline-block */
}

問題も解決します。

別の可能な解決策はtable-layout: fixed;、テーブルを設定し、それを設定することwidthです。例: http://jsfiddle.net/fd3Zx/5/

于 2012-04-29T13:25:56.913 に答える
92

入れるのも大事

table-layout:fixed;

含まれているテーブルに対して、IE9でもうまく動作します（最大幅を利用している場合）。

于 2012-10-11T12:05:50.693 に答える
84

前に述べたように、使用できますtd { display: block; }が、これはテーブルを使用する目的に反します。

使用できますtable { table-layout: fixed; }が、一部の列に対して異なる動作をさせたい場合があります。

したがって、目的を達成するための最良の方法は、テキストを でラップし、次の<div>ように CSS を<div>( ではなく<td>) に適用することです。

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
于 2014-02-26T12:54:10.403 に答える
45

max-widthの代わりに を使用してみてくださいwidth。テーブルは幅を自動的に計算します。

ie11（ie8互換モードで）でも動作します。

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .

于 2012-04-29T13:11:21.080 に答える
26

デモページ

幅が動的なテーブルの場合、以下の方法で満足のいく結果が得られました。<th>トリミングされたテキスト機能が必要なそれぞれには、<th>許可の内容をラップする内側のラッピング要素が必要text-overflowです。

本当の秘訣は、 unitsmax-widthで(上で<th>)設定することです。vw

これにより、要素の幅が効果的にビューポート幅 (ブラウザー ウィンドウ) に「バインド」され、レスポンシブ コンテンツ クリッピングが発生します。vw単位を必要な満足のいく値に設定します。

最小限の CSS:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

デモ (編集可能なテキスト付き):

document.designMode="on"
table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

于 2016-04-21T10:17:51.110 に答える
-2

max-width を td に設定したくない場合 (この回答のように)、max-width を div に設定できます。

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

注: 100% では機能しませんが、FF では 99% でうまくいきます。他の最新のブラウザーでは、ばかげた div ハックは必要ありません。

td {
  境界線: 1 ピクセルの黒一色。
    パディング左:5px;
    パディング右:5px;
}
td>div{
    最大幅: 99%;
    オーバーフロー: 非表示;
    テキストオーバーフロー: 省略記号;
    空白: nowrap;

}
于 2015-04-08T21:00:52.380 に答える