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について

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-651cdee159 …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

アーカイブ