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

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …

no image

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

laravel Mix

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

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

アーカイブ