skillup

技術ブログ

デザイン

CSSでのtableについて

投稿日:2016年9月6日 更新日:

tableで気を付けたいポイントなど。

ボーダー表示

通常のtableのラインは二重線でちょっと気持ちが悪いです。通常はcollapseが一般的でしょう。

テーブルの背景色とボーダーのスタイル

テーブル枠と、内部の枠の幅を調整したい場合はtableのCSSを下記のように設定

tableのレイアウト

table-layoutを使うことで、各セルの幅をコントロールすることができる。

table-layout auto

全体を読み込んでから幅の長さを決定する。幅がテキストの長さに依存。幅が長ければ長いほどセル幅も長くなる。

table-layout fixed

幅を指定したいときにはこれをつかう。一行目を読み込んだ時点で幅の長さを決定する。

ただし幅が指定されている必要があり、幅が指定されていないと等間隔になります。

widthなどで値を指定できますが、基本としては下記のような特徴があります。

  • 親以上の幅は取れない
  • 他のテーブルの文字をつぶすことはできない
  • 同一列で長さが違った場合(例えばthとtdなど。)は長いほうが優先される

http://www.htmq.com/style/table-layout.shtml
CSSでtable幅を設定するためのまとめ

中央ぞろえはtext-alignとvertical-alignで決まります。

nth系

たとえば最終列のみ右寄せにしたい場合は下記のように書きます。

4列目と6列目を右寄せにしたい場合は下記のようになります。(主に数字のデータなど)

4列目以降は改行しない

偶数行のみ色をつけたい

※ちなみに奇数は2nの代わりに2n+1など。

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …