
Nouvelle version :
Autre solution, mieux écrite, exploitant la propriété CSS box-sizing: border-box; : http://jsfiddle.net/frontenddeveloper/795Cc/4/.
Sources :
Prise en charge : IE9+ (IE8+ sans l’utilisation de la fonction calc pour pallier à un bug de largeur sur le dernier élément de la liste).
<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
<li><a class="link" href="#">01</a></li>
<li><a class="link" href="#">02</a></li>
<li>03</li>
<li>04</li>
<li><a class="link" href="#">05</a></li>
<li><a class="link" href="#">06</a></li>
<li class="current"><strong>07</strong></li>
<li><a class="link" href="#">08</a></li>
<li><a class="link" href="#">09</a></li>
<li><a class="link" href="#">10</a></li>
<li><a class="link" href="#">11</a></li>
<!--li><a class="link" href="#">12</a></li-->
</ul>
.sizes-list{
width: 100%;
float: left;
margin-bottom: 16px;
}
.sizes-list li{
float: left;
text-align: center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
clear: left;
}
/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
clear: none;
}
.sizes-list li{
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 0;
border-style: solid;
border-color: #e5e5e5;
}
.sizes-list li{
width: 20%;
}
.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
width: calc(20% + 3px);
border-color: red;
}
.sizes-list li:nth-child(5n+5):last-child{
width: 20%;
border-color: olive;
}
.sizes-list.four-columns-rows li{
width: 25%;
}
.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
width: calc(25% + 3px);
border-color: red;
}
.sizes-list.four-columns-rows li:nth-child(4n+4):last-child{
width: 25%;
border-color: olive;
}
/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
margin-top: -3px;
}
.sizes-list,
.sizes-list a.link{
color: #50494c;
text-decoration: none;
}
.sizes-list li.current{
background-color: #e5e5e5;
}
/*
.sizes-list a.link,
.sizes-list strong{
display: block;
padding: 8px 0;
}
*/
.sizes-list li:last-child,
.sizes-list li:nth-child(5n+5),
.sizes-list.four-columns-rows li:nth-child(4n+4),
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child{
border-right-width: 3px;
}
.sizes-list.four-columns-rows li:nth-child(5n+5){
border-right-width: 0;
}
Ancienne version :
Test en live : http://jsfiddle.net/frontenddeveloper/As8BQ/.
La liste comportera des cellules à largeurs flexibles (déclarées en pourcentages (%)). Le tableau affiche par défaut 5 colonnes. L’ajout de la classe .four-columns-rows affichera un tableau de 4 colonnes.
<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><strong></strong></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
<li><a class="link" href="#"></a></li>
</ul>
.sizes-list{
width: 100%;
float: left;
margin-bottom: 16px;
}
.sizes-list li{
float: left;
text-align: center;
}
/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
clear: left;
}
/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
clear: none;
}
.sizes-list li{
width: 20%;
}
/* [standard 5 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 6ème élément inclus */
.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
width: 20.97%;
}
/* [4 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li,
.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
width: 25%;
}
/* [4 colonnes] Si le dernier élément de la liste est l'un des 3 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li:nth-child(-n+3):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
width: 25.97%;
}
/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
margin-top: -3px;
}
.sizes-list a.link,
.sizes-list strong{
display: block;
padding: 8px 0;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-right-width: 0;
border-style: solid;
border-color: #e5e5e5;
}
.sizes-list,
.sizes-list a.link{
color: #50494c;
text-decoration: none;
}
.sizes-list strong{
background-color: #e5e5e5;
}
/*
.sizes-list li:nth-child(5n+1) a.link,
.sizes-list li:nth-child(5n+1) strong,
.sizes-list.four-columns-rows li:nth-child(4n+1) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+1) strong{
border-left-width: 3px;
}
*/
.sizes-list li:last-child a.link,
.sizes-list li:last-child strong,
.sizes-list li:nth-child(5n+5) a.link,
.sizes-list li:nth-child(5n+5) strong,
.sizes-list.four-columns-rows li:nth-child(4n+4) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+4) strong,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child strong{
border-right-width: 3px;
}
.sizes-list.four-columns-rows li:nth-child(5n+5) a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5) strong{
border-right-width: 0;
}