「CSS」separateでテーブルの枠線を離して表示する
構文
border-collapse: separate;
separate
隣接するセルが個別に境界線を持ちます (separated-border 表レンダリングモデル)。
使用例
<style>
/* 枠線を離して表示 */
.separate {
border-collapse: separate;
}
table {
display: inline-table;
margin: 1em;
border: dashed 5px;
}
table th,
table td {
border: solid 1px;
width: 100px;
}
</style>
<table class="separate ">
<tr>
<td>1001</td>
<td>item Aaa</td>
</tr>
<tr>
<td>2002</td>
<td>item Bbb</td>
</tr>
<tr>
<td>3003</td>
<td>item Ccc</td>
</tr>
</table>
<style>
/* 枠線を離して表示 */
.separate {
border-collapse: separate;
}
table {
display: inline-table;
margin: 1em;
border: dashed 5px;
}
table th,
table td {
border: solid 1px;
width: 100px;
}
</style>
<table class="separate ">
<tr>
<td>1001</td>
<td>item Aaa</td>
</tr>
<tr>
<td>2002</td>
<td>item Bbb</td>
</tr>
<tr>
<td>3003</td>
<td>item Ccc</td>
</tr>
</table>
<style>
/* 枠線を離して表示 */
.separate {
border-collapse: separate;
}
table {
display: inline-table;
margin: 1em;
border: dashed 5px;
}
table th,
table td {
border: solid 1px;
width: 100px;
}
</style>
<table class="separate ">
<tr>
<td>1001</td>
<td>item Aaa</td>
</tr>
<tr>
<td>2002</td>
<td>item Bbb</td>
</tr>
<tr>
<td>3003</td>
<td>item Ccc</td>
</tr>
</table>