display: table et display: table-cell pour faire une mise en page web ?

Après la lecture du livre CSS avancées — Vers CSS3 et HTML5, je me suis amusé avec les propriétés de rendu en tableau avec CSS (à partir de la page 122 pour ceux qui ont l’ouvrage sous les yeux). Pour m’entrainer à utiliser ces nouvelles propriétés comprises par tous les navigateurs modernes et à partir de IE8 pour Internet Explorer, je me suis fixé comme objectif de réaliser une mise en page du type de ce que l’on fait généralement à base de `float: left` et de `margin-right` pour obtenir des colonnes séparées par des gouttières. Bref, du classique de chez classique.

Sauf qu’il semble à première vue que la propriété `border-spacing`  (associée à `border-collapse: separate`) fait uniquement ce qu’elle est censée faire : un espace autour des blocs auxquels on a appliqué `display: table-cell`, soit en haut et en bas soit à droite et à gauche de tous les blocs selon qu’on applique une ou plusieurs valeurs, comme `border-spacing: 0 20px` ou `border-spacing: 20px 0`.

Mise en page avec border-spacing

#main {
    display: table;
    border-collapse: separate;
    border-spacing: 20px 0;
    border: 1px solid grey;
    width: 100%;
}
#primary {
    display: table-cell;
    background: red;
}
#secondary {
    display: table-cell;
    width: 30%;
    background: green;
}

Ce qui n’arrange pas mes affaires, car je voudrais uniquement une marge à la droite du premier bloc en `display: table-cell` pour repousser le second de la largeur d’une gouttière de 20px, par exemple.

Maquette avec border

Bref, après quelques tâtonnements, je suis en partie parvenu à un résultat partiellement satisfaisant en utilisant une bordure et en lui donnant la même couleur que le fond et la largeur de la gouttière que je voulais :

#main {
    display: table;
    border: 1px solid grey;
    width: 100%;
}
#primary {
    display: table-cell;
    background: red;
    border: 20px solid white;
    border-width: 0 20px 0 0;
}
#secondary {
    display: table-cell;
    width: 30%;
    background: green;
}

En bref

Je n’exclu pas le fait d’être passé à côté d’une propriété, mais il semble que la mise en page à base de `display: table` et `display: table-cell` ne soit pas aussi évidente qu’on aurait pu le croire de prime abord, même en faisant son deuil des versions antérieures à IE8. Dans les faits, `border-spacing` ne semble pas s’appliquer uniquement aux bordures adjacentes.