モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
問題 HTMLのtableの中のあるセル（td要素）内に、長いURLが入ると、突っ張り棒のようにそのセルの横幅が大きくなってしまう。 word-wrap:break-word;も効いてくれないみたい。 テーブルのセルの幅を調整したいんだけど、Javascriptでも使わないとだめ？ TDの中で折り返してもらうには、どうするといい？ 解答例 ここまでやれば、たぶん期待した表示になる。 １、table要素に、幅（width）を指定する。 ２、td要素にもcol要素か何かで、pxでも%でもよいから、幅（width）を指定する。 ３、table要素に、CSSで table-layout:fixed する。 ４、td要素（もしくはその中の問題の要素）に、CSSで word-wrap:break-word する。 以下、表示例をいくつか。 １、２だけだと長い単語とみなされたものが突っ張り棒状態になる
table-layoutプロパティは、テーブル（表）の表示方法を指定する際に使用します。 指定できるのは、テーブル（表）の列幅を自動レイアウトにするか（auto）、固定レイアウトにするか（fixed）についてです。いずれの場合も行の高さは自動的に算出されます。 初期値のtable-layout:auto; では、ブラウザはテーブル（表）全体を読み込んでから、セル内容に合わせて各列の幅を決定して表示を開始しますが、 table-layout:fixed; を指定すると、最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあります。 table-layoutプロパティに「fixed」を指定する場合には、必要に応じて各列（セル）の幅を指定しますが、幅が指定されていない列には残りの幅が均等に割り当てられます。 ■値 HTMLソース <p>table-lay
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
