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

福岡でWEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やセミナーを開催

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

time 2017/10/17

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

table {
width: 100%;
}

 

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

 

table {
width: 100%;
table-layout: fixed;
}

 

 

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

table tr th,
table tr td {
padding: 5px 10px;
border: 1px solid #000;
}

 

 

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

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

table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}

 

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

 

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

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

download

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー