Own products

  • 新規事業のアイディア創造機

Memolog

text-overflow: ellipsis を table(td) で有効にする方法

  • このエントリーをはてなブックマークに追加

表示領域からはみ出た部分を非表示にして末尾を ･･･ にしてくれるCSSプロパティ「text-overflow: ellipsis」。
ただコレ、テーブル組みの td には、そのまんまじゃ効かない。
解決法はカンタン、親である table 要素に「table-layout: fixed」と指定すればOK！

table#my_table {
	table-layout: fixed;
}
table#my_table td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

CAPTCHA


  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

    お名前※必須

    ご連絡先メールアドレス

    お問い合わせ内容※必須


    Blog parts

    Affiliate