CSSのみで、テーブルのボーダーをレインボーカラーのグラデーションにします。
サンプルは、背景をレインボーカラーに指定したdiv要素の中にtable要素を配置しています。div要素のサイズをtable要素とあわせ、tdの背景をdiv要素の親側の暗い背景色(#222)にし、ボーダーのみを透明にすることで、div要素の背景のレインボーカラーをボーダーに適用させています。
htmlソース
<table>
<tr>
<td><a href="#">リンク01</a></td>
<td><a href="#">リンク02</a></td>
<td><a href="#">リンク03</a></td>
<td><a href="#">リンク04</a></td>
<td><a href="#">リンク05</a></td>
</tr>
<tr>
<td><a href="#">リンク06</a></td>
<td><a href="#">リンク07</a></td>
<td><a href="#">リンク08</a></td>
<td><a href="#">リンク09</a></td>
<td><a href="#">リンク10</a></td>
</tr>
</table>
CSSソース
div#sample div {
margin:15px auto;
display: table;
background: -webkit-linear-gradient(left, #Faa, #CF6 25%, #3CC 70%, #aaf 90%);
background: linear-gradient(to right, #Faa, #CF6 25%, #3CC 70%, #aaf 90%);
}
div#sample div a {
display: block;
width: 100px;
height: 40px;
background-color: #222;
font-size:14px;
line-height: 40px;
text-align: center;
color:#999;
text-decoration:none;
}
div#sample div a:hover {
color:#fff;
}
div#sample div table {
border-collapse: collapse;
}
div#sample div td {
padding: 0;
border: 1px solid transparent;
}