fbpx

エグウェブ.JP@福岡/WEBセミナー・分析・WEBサイト制作

皆様の人生に最良のファーストステップを。福岡でWEB分析やホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Adobe Photshop・illustrator、Excel等の講座やセミナーを開催。

<HTML・CSS>tableのデザインをCSSで変えてみる

time 2017/10/17

初期の状態でtable要素に線も何も入ってなかったので入れてみることに。

 

横幅をコンテンツいっぱい(100%)に。見た目は特に変化なし。

 

 

 

table-layout: fixed;で均等に分割(列幅の指定がある場合は指定した値で固定されて表示されます)

 

 

paddingで上下左右の幅を少し取って、solidで1本線表示。

1本線にしたいので、tableにborder-collapse: collapse;を追加。

 

いい感じになったと思います。

 

あとは線の太さを変えてみたり、slolid → dashedで破線に変えてみたりしても良いかもしれません。

ぜひ色々と試してみて下さい★

おすすめ記事

プロフィール

EGUWEB

EGUWEB

WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー