skillup

技術ブログ

デザイン

CSSでのtableについて

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

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

ボーダー表示

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

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

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

tableのレイアウト

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

table-layout auto

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

table-layout fixed

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

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

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

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

★スタイルシートリファレンス
CSSでtable幅を設定するためのまとめ

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

nth系

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

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

4列目以降は改行しない

偶数行のみ色をつけたい

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

-デザイン
-,

執筆者:


comment

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

関連記事

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

laravel Mix

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

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

アーカイブ