1. ホーム
  2. html

[解決済み] テーブルセルでCSS省略記号が機能しないのはなぜですか?

2022-04-25 12:35:07

質問

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

$(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 となり、省略記号が表示されない。

何が足りないのでしょうか?

解決方法は?

どうやら、追加するようです。

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

も同様に問題を解決します。


もう一つの可能な解決策は table-layout: fixed; を設定し、さらにそのテーブルの width . 例えば http://jsfiddle.net/fd3Zx/5/