Je voudrais créer une table réactive comme thisComment faire la table réactif sans utiliser bootstrap
Maintenant, j'ai une grande contenu des données (qui est rempli dynamiquement) pour chaque cellule, et si vous remarquez ce tableau chevauche le contenu sur la plus petite taille d'écran (300 px et moins). Bien que cela puisse être géré, mais je voudrais avoir une solution optimale pour cela, si possible.
Toute aide serait appréciée.
Il peut être votre réponse s'il vous plaît voir le résultat en plein écran
table tr td,table tr td{
\t \t text-align: center;
\t }
\t @media only screen and (max-width: 500px) {
\t table,head,tbody,th,td,tr {
\t \t display: block;
\t }
\t thead tr {
\t display: none;
\t }
\t tr {
\t border: 1px solid #ccc;
\t }
\t td {
\t border: none;
\t border-bottom: 1px solid #eee;
\t position: relative;
\t padding-left: 50%;
\t white-space: normal;
\t text-align:left;
\t min-height: 30px;
\t overflow: hidden;
\t word-break:break-all;
\t }
\t td:before {
\t position: absolute;
\t top: 6px;
\t left: 6px;
\t width: 45%;
\t padding-right: 10px;
\t text-align:left;
\t font-weight: bold;
\t }
\t td:before { content: attr(data-title); }
}<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table width="100%">
\t <thead>
\t \t <tr>
\t \t \t <th>Name</th>
\t \t \t <th>ID</th>
\t \t \t <th>designation</th>
\t \t </tr>
\t </thead>
\t <tbody>
\t \t <tr>
\t \t \t <td data-title="Name">John</td>
\t \t \t <td data-title="ID">100</td>
\t \t \t <td data-title="designation">Software Engineer</td>
\t \t </tr>
\t \t <tr>
\t \t \t <td data-title="Name">Shyam</td>
\t \t \t <td data-title="ID">101</td>
\t \t \t <td data-title="designation">Quality Analyst</td>
\t \t </tr>
\t \t <tr>
\t \t \t <td data-title="Name">Mark</td>
\t \t \t <td data-title="ID">102</td>
\t \t \t <td data-title="designation">Software Engineer</td>
\t \t </tr>
\t \t <tr>
\t \t \t <td data-title="Name">Bill</td>
\t \t \t <td data-title="ID">104</td>
\t \t \t <td data-title="designation">Quality Analyst</td>
\t \t </tr>
\t \t <tr>
\t \t \t <td data-title="Name">Arjun</td>
\t \t \t <td data-title="ID">105</td>
\t \t \t <td data-title="designation">Human Resources</td>
\t \t </tr>
\t \t <tr>
\t \t \t <td data-title="Name">Pratyush</td>
\t \t \t <td data-title="ID">106</td>
\t \t \t <td data-title="designation">Software Engineer</td>
\t \t </tr>
\t \t <tr>
\t \t \t <td data-title="Name">Anant</td>
\t \t \t <td data-title="ID">101</td>
\t \t \t <td data-title="designation">Administrative Dept</td>
\t \t </tr>
\t </tbody>
</table>
</body>
</html>Dans extrait ci-dessus, vous pouvez utiliser la requête des médias qui taille de l'écran que vous souhaitez empiler td de la table par exemple: 300px
Merci pour la solution. Il semble très bien que la hauteur des lignes est gérée en fonction du contenu. Bien que dans le cas où mon titre dépasse une limite, disons 'data-title = MyExtraLongDataTitleThatExceedsALimit', dans ce cas la hauteur de la ligne n'est pas automatiquement gérée. J'espère que javascript devrait être utilisé pour cela. – Anant
Qu'avez-vous déjà essayé? Veuillez ajouter un [MCVE] et mettre en évidence les problèmes que vous avez rencontrés. – Shaggy