css défilement horizontal dans une table

Question

Je souhaite construire une ligne de temps qui a un défilement horizontal.

J'ai un emballage DIV, à l'intérieur il a des mois. Chaque mois est un DIV inline-block. Cela fonctionne:

<div class="wrap"> 
    <div class="month">Jan 2013</div> 
    <div class="month">Feb 2013</div> 
    ... 
</div> 

Cela fonctionne presque, mais parce que mes clients site utilise des tables pour la mise en page les barres de défilement ne fonctionnent pas. Cela échoue:

<table><tr><td> 

<div class="wrap"> 
    <div class="month">Jan 2013</div> 
    <div class="month">Feb 2013</div> 
    ... 
</div> 

</td></tr></table> 

Voici un jsFiddle pour montrer ce que je veux dire: http://jsfiddle.net/fhL9u/2/

REMARQUE: L'exemple haut de la chronologie fonctionne comme vous redimensionnez le navigateur. Il s'agit d'une largeur de 100% de la page (ou de l'élément contenant.)

Comment faire pour que le deuxième débordement de la timeline soit correctement effectué? Il doit prendre la largeur restante de l'écran (pas avec: 100px hacks), et si possible seulement afficher les barres de défilement lorsque les mois débordent.

Ceci est une application interne, donc je peux dire aux gens d'utiliser Firefox ou Chrome si j'en ai besoin. Cela signifie que je peux utiliser des trucs CSS3 avancés ou des trucs spécifiques au navigateur (-webkit ou -moz). Je préfère que c'était IE8 compatable (juste pour ma propre curiosité)

Answer 1

Si vous pouvez fixer le width de ce texte (en pixels ou en pourcentage) utiliser cette solution:

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

td:first-child { 
    width: 100px; /* or width: 15%; */ 
} 

Notez que vous pouvez utiliser un sélecteur différent pour le texte (comme un class)

Answer 2

solution possible ....

le principal problème peut être que la cellule « Navigation dans le site » fait partie de la zone de défilement.

table { display: block; } 

puis attribuez-lui la classe .wrap à la table et enlever la div englobant les mois.

Fiddle here

seulement testé dans Chrome.

Answer 3

Vous pouvez simplement mettre une largeur sur le div.wrap, disent 400px- qui fonctionne et est juste une ligne de code :-)