convertir les tables fixes à répondre pour mobile

Question

l'URL est http://action.news il y a 3 colonnes dans une table de largeur fixe)

(j'ai supprimé le script qui charge sur demande) pour faciliter les choses. merci de bien vouloir

ce que je l'ai fait: ajouté ce code ci-dessous

https://gist.github.com/hkirsman/3002480

ajouté ce suivant les instructions de Google

<meta name=viewport content="width=device-width, initial-scale=1"> 

j'ai lu HTML table with auto-fit for some columns, fixed width for others

mais toujours dévers obtenir la page pour être mobile amical, la partie supérieure semble se réaligner

Answer 1

que j'ai trouvé cet exemple sur le Codepen afin que vous puissiez l'essayer et l'adapter à vos besoins:

Voici un code

HTML:

<table class="js-table participants-table"> 
    <caption> 
    <p>Responsive Table</p> 
    </caption> 
    <thead> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Gender</th> 
     <th>Picture</th> 
    </tr> 
    </thead> 
    <tbody> 
    <!--filled from javascript--> 
    </tbody> 
</table> 

CSS:

HTML { 
    font-size: 100%; 
    line-height: 1.5; 
    font-family: 'Raleway', sans-serif; 
} 

BODY { 
    margin: 0; 
} 

*, *:before, *:after { 
    box-sizing: border-box; 
} 

IMG { 
    max-width: 100%; 
} 


/*Style For Table*/ 

.participants-table { 
    table-layout: fixed; 
    border-collapse: collapse; 
    margin: 0 auto; 
    width: 90%; 
} 

.participants-table TD, 
.participants-table TH { 
    border: 1px solid #b4adad; 
} 

.participants-table IMG { 
    width: 150px; 
} 

.participants-table THEAD { 
    display: none; 
} 

.participants-table TD { 
    display: block; 
    position: relative; 
    overflow-x: hidden; 
    text-overflow: ellipsis; 
} 


@media only screen and (min-width: 450px) { 
    .participants-table { 
    width: auto; 
    } 
    .participants-table TD, 
    .participants-table TH { 
    padding: .2em 1em; 
    } 
    .participants-table THEAD { 
    display: table-header-group; 
    } 
    .participants-table TD { 
    display: table-cell; 
    position: static; 
    } 
    .participants-table TD:before { 
    display: none; 
    } 
}