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

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

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

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

no image

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …