css

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

投稿日:2020年2月29日 更新日:

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

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

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

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

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

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

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

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

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

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

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

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

最新記事

チャーさん

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

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

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