こんにちは！
.
テーブルのようなレイアウトのものを作りたいのですが、テーブルレイアウト内に登場する要素の数が、DBから動的に取得されるため変動してしまうのですが、その際、要素の数によってはテーブルのセルを構成するための罫線が上手く表示されません。
.
どのようにすれば、上手く罫線を全て表示出来るのでしょうか？
.
.
.
■ CodePenのデモ
ttp://codepen.io/anon/pen/IwEbi
.
.
.
■ HTML
.
<!-- 6番目が存在する場合 -->
<ul class="list">
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
</ul>

<!-- 6番目が存在しない場合 -->
<ul class="list">
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
<li class="item">1</li>
<!-- ここに上ボーダーが欲しい -->
</ul>

.
.
.
■ CSS
.
body {
padding: 10px;
}

/* ul */
.list {
list-style: none;
margin: 0;
padding: 0;
width: 400px;
border-left: solid 1px #ccc;
border-right: solid 1px #ccc;
border-bottom: solid 1px #ccc;
margin-bottom: 20px;
overflow: hidden; /* micro clearfix */
}

/* li */
.item {
width: 50%;
float: left;
text-align: center;
box-sizing: border-box;
border-top: solid 1px #ccc;

}

/* li */
.item:nth-child(odd) {
border-right: solid 1px #ccc;

}

/* li */
.item:nth-child(even) {
}

.
.
.
■ 条件
* IE8以上対応
* liの数は動的にDBから取得されるため変動する