Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css

cssでテーブルの行間を広げる方法

投稿日:

Pocket

うも、チャーさんです。

あなたはcssでテーブルに行間をとりたい、

(セルとセルの間のスペースを広げたい)と思ってませんか?

 

この記事では、cssでテーブルの行間を

広げる方法を書いてるので、読めば、

あなたはテーブルの行間を広げれるようになります。

 

ということで、テーブルの行間を

広げたければこのまま読んでください。

 

スポンサードサーチ

cssでテーブルの行間を広げる方法

 

で結論ですが、

cssでテーブルの行間を広げる

には、border-spacingを使いましょう。

 

 

border-spacingとは

 

border-spacingは行間をコントロール

することができるものでして、

border-spacingと書くと、

 

以下の画像のように、

css テーブル 行間

テーブルのセルの間のスペース(行間を)

広げることが可能です。

 

 

なので、cssでテーブルの行間を

広げたい場合は、

border-spacingと書きましょう。

 

 

border-spacingと書く場所は?

 

で、border-spacingを書く場所ですが、

tableタグに対して書きましょう。

 

例としては、以下のようにです。

table {
border:1px solid black;
border-spacing: 26px 34px;
}

 

tableタグに対してborder-spacingと

書くことで、機能してセルの間の行間が広がります。

 

 

border-spacingの数値の意味は?

で、border-spacingですが、数値が二つ取れまして、

最初の数字が左右の幅、2番目の数字が縦の幅を広げる

ことが可能です。

 

例えば、border-spacing:20px 30px;

と書いてたとすれば、20pxぶん、左右に

スペースを広げてくれて、

 

30pxぶん縦に行間を取ってくれるという

感じです。

 

 

ということで上記を知ってれば、

実際にcssでテーブルの行間をとれるので、

参考にしてみてください。

 

 

スポンサードサーチ

まとめ

 

ということでまとめに入ります。

テーブルに行間を取りたければ、

border-spacingを使いましょう。

 

またテーブルを使う際、

web制作ではテーブルもレスポンシブ対応

させる必要性が多々出てくるので、

 

cssでテーブルをレスポンシブにする方法が、

知りたい場合は、以下の記事を読んでください。

 

cssでテーブルをレスポンシブの縦並びにする方法

 

それでは、読んでもらってありがとうございました。

 

チャーさん

-css

スポンサードサーチ

関連記事

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。