リストのスタイル「テーブル式」をCSSで見栄えよくした表

 
 
CSSで表の罫線、左右の幅、余白、背景色をCSSで管理できるようにしています。
ブロックエディタのCSSではリストのスタイル「テーブル式」の項目がありません。CSSファイルに直接エディタで書いてからBiNDで読み込めばCSSタブに反映されます。罫線、余白、文字サイズなど設定しそうな項目をCSSで変更できるようにしています。
リストのスタイル「テーブル式」を調整するときはDRESSでやるのが普通かもしれませんが、DRESSはどうしても使いにくく感じるため、CSSで調整できるようにしました。
また、１行ごとに色がつくように設定しています。
 

001_参考

左右の文字数で幅が自動的に調整されます。試しに事業内容を「じぎょうないよう」に変更してみました。
 
 

table_001a

表の１行ごとに色がつかないようにしたパターン。
 

default

設定なしでリストのスタイル「テーブル式」をした時の見え方。すべての罫線が引かれ、左右の幅は文字数によって自動的に調整されます。