ちょっと立体に見えるテーブルの作り方。
テーブルってあんまり使わないですかね。
でも、表など、テーブル作るを作るとき、
ちょっといつもと違う雰囲気、可愛く(？)する方法。
なんとなく、立体に見えます。。
ちょっと立体に見えるテーブルの作り方。
=html= <table> <tr> <th>test</th> <td>テスト</td> <td>テスト</td> </tr> <tr> <th>test</th> <td>テスト</td> <td>テスト</td> </tr> <tr> <th>test</th> <td>テスト</td> <td>テスト</td> </tr> <tr> <th>test</th> <td>テスト</td> <td>テスト</td> </tr> <tr> <th>test</th> <td>テスト</td> <td>テスト</td> </tr> </table>
普通にテーブルを作る
=css=
table{
font-size:18px;
border-collapse:separate;
border-spacing:0px;
border-left:#4B4B4B 2px solid;
border-top:#4B4B4B 2px solid;
}
table tr th{
width:100px;
background-color:#D0D0FF;
padding:10px;
border:#4B4B4B 2px solid;
border-left:#fff 2px solid;
border-top:#fff 2px solid;
}
table tr td{
width:100px;
background-color:#FFCEF4;
padding:10px;
border:#4B4B4B 2px solid;
border-left:#fff 2px solid;
border-top:#fff 2px solid;
}
border-collapse:separate;とborder-spacing:0px;がポイントです。
border-collapse:separate;で
隣接するセルのボーダーを間隔をあけて表示します。
感覚としては、th・tdをそれぞれバラバラにする感じです。
border-spacing:0px;で
border-spacingプロパティは、隣接するセルのボーダーとボーダーの間隔を0pxに指定します。
そして、left・topなど必要な部分に立体に見えるようborderを。
私が使う場合は、borderの太さは大体1pxか2pxにしています。
これで、おわり！
・・・どうですか？なんとなーく立体にみえますよね！ｗ
