CSS note

.border-item{
 background:#eee;
 width:auto;
 height:100px;
 border-bottom: 1px solid #ccc;
 border-top: 1px solid #fff;
 box-sizing:border-box;
 /* for list */ list-style:none;
 margin:0;
}

.format-border tr:last-child td, 
div.border-item:last-child, 
li.border-item:last-child{
 border-bottom:none;
}
.format-border tr:first-child td, 
li.border-item:first-child, 
div.border-item:first-child{
 border-top:none;
}

Case1

<div class="format-border">
<div class="border-item"></div>
<div class="border-item"></div>
<div class="border-item"></div>
</div>

Case2

<ul class="format-border">
<li class="border-item"></li>
<li class="border-item"></li>
<li class="border-item"></li>
</ul>

<table class="format-border">
<tr><td class="border-item"></td><td class="border-item"></td><td class="border-item"></td></tr>
<tr><td class="border-item"></td><td class="border-item"></td><td class="border-item"></td></tr>
<tr><td class="border-item"></td><td class="border-item"></td><td class="border-item"></td></tr>
</table>

新着記事