灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</table>
CSSソース
border-collapse:collapse;
border:1px solid gray;
border-right:3px ridge gray; border-bottom:3px ridge gray;
}
.dekotbl td {
border:1px solid #000;
}
サンプル表示
| セル1 | セル2 |
| セル3 |
解説
出っ張ったテーブルを表示するには、左上から光が当たり右と下に影が出来ていると錯覚させる方法が一般的です。
これにより、平面的なテーブルではなく出っ張って見える立体的なテーブルが擬似的に作れます。
やり方としては、左と上の枠線より1px以上太い枠線を右と下に指定します。さらに、右と下の枠線を山線にすると効果が上がります。
ここでの例では、左と上の枠線は太さ1pxの実線、右と上の枠線は太さ3pxの山線にしてあります。
HTMLソース
出っ張って見える様に表示したいテーブルにのみ適用させる為、テーブルにclassを指定します。
ここでは、<table class=”dekotbl”>としています。
CSSソース
■.dekotbl {～}
border-collapse:collapse;
これは、全ての枠線をくっつけて表示するという意味です。詳細はテーブルの枠線をくっつけるへ。
border:1px solid gray;
これは、全ての枠線に「太さ1pxで灰色な実線を表示する」という意味です。詳細はテーブルに直線の枠線を表示するへ。
border-right:3px ridge gray; border-bottom:3px ridge gray;
これが今回のキモです。
右と下の枠線を「太さ3pxで灰色な山線にする」という意味になります。
具体的にはborder-right:～;が右の枠線指定。border-bottom:～;が下の枠線指定。
右枠線と下枠線それぞれに3px(太さ3px)、ridge(山線)、gray(灰色)というのを指定しています。
これにより、上で説明した右と下に影が出来たように見えるテーブルが出来上がります。
■.dekotbl td {～}
border:1px solid #000;
これは、全セルの枠線を太さ1pxで灰色な実線にするという意味になります。