常用細線表のCSS実現
技術的なものは何もありませんが、今日は古い紫竹の群れの中でこれに言及されているので、整理しておくと便利だと思います.特にweb開発をあまりしない人.私の知っている方法は全部で4種類で、もし友达が5種類目を見つけたら必ず私に教えて、追加して楽しみを分かち合います.
注意:後の2つの方法は空tdで を利用しなければならない.補白を行う.もちろんいろいろな方法で混合して使用することができます.
注意:後の2つの方法は空tdで を利用しなければならない.補白を行う.もちろんいろいろな方法で混合して使用することができます.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style>
th{
background: yellow;
}
.table1{
empty-cells: show;
border-collapse: separate !important;
border-collapse: collapse;
}
.table2{
background-color: #808080;
}
.table2 td{
background-color: #fff;
}
.table3{
border-top: 1px solid silver;
border-right: 1px solid silver;
}
.table3 td,.table3 th{
border-left: 1px solid silver;
border-bottom: 1px solid silver;
}
.table4 th{
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}
</style>
</head>
<body>
<table class="table1" border="1">
<tr>
<th> </th>
<th></th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>
<br>
<table class="table2" border="0" cellspacing="1">
<tr>
<th> </th>
<th></th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
</tr>
</table>
<br>
<table class="table3" border="0" cellspacing="0">
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table class="table4" border="1" cellspacing="0" borderColorDark="#ffffff">
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>