Réactif tableau par colonnes

J'ai un tableau avec quatre colonnes et j'ai besoin d'avoir un réactif de table où chaque colonne sera en dessous de l'autre mais je ne sais pas comment le faire. J'espère qu'il n'y est une réponse sans l'aide de Javascript.

Maintenant, j'ai un tableau comme ceci:

+---------------+
| Some text     |
+---------------+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+
| A | B | C | D |
+---+---+---+---+

Et j'ai besoin d'obtenir ce résultat en petite résolution:

+-----------+
| Some text |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| A         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+
| B         |
+-----------+

Et ainsi de suite. Est-il possible en quelque sorte? Voici mon JSfiddle. Aussi la réponse dans jsfiddle serait le mieux.

pouvez vous s'il vous plaît convertir les styles en ligne de css et de mettre à jour le violon
Afin d'accomplir cela, vous aurez à changer la structure de votre balise
Comme le tableau dans ce cas n'ont pas les différents types de colonnes, de considérer aussi cette solution avec adaptive multi-colonne de la liste: Comment faire pour afficher les éléments de liste sous forme de colonnes?

OriginalL'auteur Jaroslav Klimčík | 2014-09-28

Table ont un problème avec la réceptivité, parce que la table de données sont écrits par des lignes, de sorte que les données dans le code ressemble donc: A, B, C, D, A, B, C, D... pas A, A, A, A, B, B, B, B...

De sorte que vous ne pas obtenir une sortie avec les données dans le bon ordre.

Si vous utilisez un support de la requête, le résultat ressemble à ceci:

@media all and (max-width:500px){
    table{
        width:100%;
    }

    td{
        display:block;
        width:100%;
    }

    tr{
        display:block;
        margin-bottom:30px;
    }
}

http://jsfiddle.net/sjdjrm8m/

Vous avez besoin de convertir votre table pour cette inscription:

HTML:

<table>
<tr>
<td colspan="2">Some title</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td style="text-align: center; background-color: #e8e8e8;">&nbsp;<span style="color: #1e2a64;"><strong>Title</strong></span>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #efedee;">
<div class="circle"><strong>40.000</strong>  <sup>eur</sup>
<br>month</div>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>
<p></p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
</td>
</tr>
<tr style="height: 70px;">
<td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
<input id="kontakt_btn" type="button" value="contact">
</td>
</tr>
</tbody>
</table>
</td><td>
<table>
<tr>
<td style="text-align: center; background-color: #dedcdd;"><strong>&nbsp;<span style="color: #1e2a64;">Title2</span></strong>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #efedee;">
<div class="circle"><strong>40.000</strong>  <sup>eur</sup>
<br>month</div>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #f5f5f5;">&nbsp;<strong>Text</strong>
<p></p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
</td>
</tr>
<tr style="height: 70px;">
<td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
<input id="kontakt_btn" type="button" value="contact">
</td>
</tr>
</tbody>
</table>

CSS:

@media all and (max-width:500px){
table{
width:100%;
}
td{
display:block;
width:100%;
}
tr{
display:block;
margin-bottom:30px;
}
tr tr{
margin-bottom:0;
}
}

http://jsfiddle.net/9yefftan/

Cela rompt les choses pour les lecteurs d'écran et dans l'arborescence: developer.paciellogroup.com/blog/2018/03/... . Ce script peut aider: adrianroselli.com/2018/05/...

OriginalL'auteur maťo

2

C'est exactement ce que Amorçage du Système de Grille est pour, comme Bootstrap est conçu pour être mobile-friendly. Vous pouvez configurer un document avec un code tel que
```
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
```
Et il sera automatiquement redimensionner pour les petites tailles d'écran.

Amorçage du système de grille est certainement pas pour la création de responsive tables.

OriginalL'auteur Aeolingamenfel

C'est un peu long travail mais mon idée principale est de convertir chaque colonne d'une table et de l'envelopper dans un "principal" de la table puis utilisez le maťo solution.

http://jsfiddle.net/kLmvwsp0/2/

Page HTML

<table align="center" style="width:50%">
<colgroup>
<col width="50%" />
</colgroup>
<!-- Group 1-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 1</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 1</td>
</tr>
</tbody>
</table>
</td>
<!-- Group 2-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 2</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 2</td>
</tr>
</tbody>
</table>
</td>
</table>
<hr />
<table align="center" style="width:100%">
<colgroup>
<col width="35%" />
</colgroup>
<!-- Group 1-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 1</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 1</td>
</tr>
</tbody>
</table>
</td>
<!-- Group 2-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 2</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 2</td>
</tr>
</tbody>
</table>
</td>
<!-- Group 3-->
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align: center;"><strong>Title 3</strong>
</td>
</tr>
<tr>
<td style="text-align: center;">Text 3</td>
</tr>
</tbody>
</table>
</td>
</table>

Feuille de style CSS

/* 
Generic Styling, for Desktops/Laptops 
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
@media all and (max-width: 500px) {
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
}

OriginalL'auteur FeRRi

0

c'est pas très joli, mais vous pouvez essayer de faire tr étiquettes de colonnes et td tag lignes
```
tr{
display: inline;
float:left;
}
td{
display: block;
}
```
OriginalL'auteur Michal Vašut
-1

La meilleure façon de le faire serait avec divs et à l'aide de CSS' display: table, display: table-row et display: table-cell propriétés, ainsi que quelques points d'arrêt. Sinon, vous allez avoir beaucoup de laide du code. Ce n'est pas le sémantiquement plus grande solution, mais autant que sensible, ça ne fonctionne pas.

Voir cet excellent article pour plus d'aide: http://css-tricks.com/almanac/properties/d/display/.

OriginalL'auteur Ian

Vous devez vous connecter pour publier un commentaire.