tab-size
: タブの幅 CSSプロパティ
※ Edgeは対応してない。
このページで解説するコードの実行結果。
tab-size: 2;
<table> <tr> <td>セル1</td> <td>セル2</td> </tr> </table>
tab-size: 4;
<table> <tr> <td>セル1</td> <td>セル2</td> </tr> </table>
tab-size: 8;
<table> <tr> <td>セル1</td> <td>セル2</td> </tr> </table>
なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。
tab-size
の概要
タブの幅を指定する。
指定する値は数値(+ 単位)。デフォルト値は「8」。
Firefoxがtab-size
に対応していないので、「-moz-tab-size
」も指定する必要がある。
なお、タブ(	
)はHTMLコード中ではスペースとして扱われる。
よって、<pre>
要素やwhite-space: pre;
/white-space: pre-wrap;
を設定された要素に囲まれた要素の中のみで有効。
例
tab-size
が未設定の場合。
HTML : 適用するHTML
<pre class="sample"> <table> <span>	</span><tr> <span>		</span><td>セル1</td> <span>		</span><td>セル2</td> <span>	</span></tr> </table> </pre>
実行結果
<table> <tr> <td>セル1</td> <td>セル2</td> </tr> </table>
tab-size
を設定する。
CSS : tab-size: 8
.sample { -moz-tab-size: 8; tab-size: 8; }
実行結果
<table> <tr> <td>セル1</td> <td>セル2</td> </tr> </table>
CSS : tab-size: 4
.sample { -moz-tab-size: 4; tab-size: 4; }
実行結果
<table> <tr> <td>セル1</td> <td>セル2</td> </tr> </table>
CSS : tab-size: 2
.sample { -moz-tab-size: 2; tab-size: 2; }
実行結果
<table> <tr> <td>セル1</td> <td>セル2</td> </tr> </table>