スポンサード リンク
caption-sideプロパティ
table要素のcaption(題名)の表示場所を選択できます使い方(書式)
セレクタ { caption-side: 値; }
caption-sideプロパティ
対応ブラウザ | |
適用できる要素 | caption要素 displayプロパティの値にtable-captionを指定した要素 |
子要素へのスタイルの継承 | する |
プロパティの値 | 説明 |
top | table要素の上に題名を表示 |
bottom | table要素の下に題名を表示 |
実際の指定方法
.caption { caption-side: top; } /* table要素の上にcaptionを表示 */
.caption2 { caption-side: bottom; } /* table要素の下にcaptionを表示 */
html部分
<table> <caption class="caption">caption-side: top;</caption> <tr> <td>セル</td> <td>セル</td> </tr> <tr> <td>セル</td> <td>セル</td> </tr> </table> <table> <caption class="caption2">caption-side: bottom;</caption> <tr> <td>セル</td> <td>セル</td> </tr> <tr> <td>セル</td> <td>セル</td> </tr> </table>
実際の表示 値がtop
セル | セル |
セル | セル |
実際の表示 値がbottom
セル | セル |
セル | セル |