幅いっぱいのスマホサイトのメニューで1pxのボーダーを追加する方法

基本的にスマホサイトを作る際はリキッドレイアウトにすることが多いと思う。
その際１つ１つの要素に対して％（パーセント）指定をするが、1pxのボーダーを要素の間にいれようと思うと、
これがなかなかうまくいかない。。。

そんな時はtable-layout:fixedとtable-cellを使うとうまくいく。

こちらがCSS

ul {
	display: table;
	table-layout: fixed;
	width: 100%;
}

li {
	display: table-cell;
	background: #ccc;
	text-align: center;
	height: 50px;
	vertical-align: middle;
}

li:nth-child(2) {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

こちらはHTML

<ul>
	<li><a href="#">MENU</a></li>
	<li><a href="#">MENU</a></li>
	<li><a href="#">MENU</a></li>
</ul>