CSS pour tableau

Bonjour,

Dans la version html ordinateur du site web, j'ai des milliers de tableaux html qui ont des valeurs height et width

Dans la version mobile, les tableaux ont une max-width de 100% mais ils reprennent les valeurs version ordinateur, or j'aimerais que dans la version mobile : la largeur des tableaux soit imposée à 100%

avez-vous une idée de css qui passerait outre les valeurs version ordinateur ?

merci

Bonjour et bienvenue sur le forum,

Une solution à ton problème sera d'utiliser les mediaqueries !

Bonjour,

J’utilise une mediaqueries proposée sur alsa d'ailleurs, la voici :
Une modification possible a faire ?

@media (max-width: 940px) 
{
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
    img,
    table,
    td,
    dt,
    dd,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video,
    id {
        max-width: 100%; !important;
    }
    
    /* conserver le ratio des images */
    img {
        height: auto;
    }
    
    /* gestion des mots longs */
    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
    element1,
    element2 {
        float: none;
        width: auto;
    }
    
    /* masquer les éléments superflus */
    .hide_mobile {
        display: none !important;
    }
    
}

Bonjour,

pour des tableaux il te manque le : table-layout:fixed; pour que les largeurs indiquées restent ... fixes. Ensuite pour les tableaux il faut utilisé width plutôt que max-width. (idem si display:table & Cie )
Modifié par gc-nomade (29 Dec 2015 - 15:06)

Voici un exemple de tableau responsive qui utilise les media queries mais aussi les attributs data-* pour la réorganisation des données sur de petits écrans : Tables

Il s'agit uniquement de html et de css, inspectez le code source des éléments si vous souhaitez comprendre la structure.