WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「テーブルの罫線の間隔」

border-spacing「テーブルの罫線の間隔」

「border-spacing」は、隣接するセルのボーダーの間隔を指定します。
「border-collapse」に、separateが指定の時のみ有効です。

CSS Ver.適用要素継承
2.1<table>する
広告

border-spacing の指定方法

構文

border-spacing : length ;

1個~2個までスペースで区切って指定可能。負の値は指定不可。
1個指定は、4辺(上下左右)全てに同じ値になります。
2個指定は、1個目が左右、2個目が上下の値になります。
プロパティ/設定値意味
border-spacing : 10px;
border-spacing : 5em;
間隔を値で指定
長さ・大きさの単位参照
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

border-spacing のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_border_spacing_1 {
	border-collapse:separate;
	border-spacing:10px;
	border: solid 1px #000000; }
.css_border_collapse_collapse td{ border: solid 1px #ff0000;}

.css_border_spacing_2 {
	border-collapse:separate;
	border-spacing:1em 2em;
	border: solid 1px #000000; }
.css_border_collapse_separate td{ border: solid 1px #ff0000;}

</style>

<!-- html -->
<div class="common">
  <div class="cssTitle">border-spacing:10px</div>
  <div>
  <table class="css_border_spacing_1">
  <tbody>
  <tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
  <tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
  <tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
  </tbody>
  </table>
  </div>

  <div class="cssTitle">border-spacing:1em 2em</div>
  <div>
  <table class="css_border_spacing_2">
  <tbody>
  <tr><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td></tr>
  <tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
  <tr><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
  </tbody>
  </table>
  </div>

</div>
border-spacing:10px
1-11-21-31-4
2-12-22-32-4
3-13-23-33-4
border-spacing:1em 2em
1-11-21-31-4
2-12-22-32-4
3-13-23-33-4

広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン