Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Une forme de tableau responsive qui inverse les lignes et les colonnes #8

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Une forme de tableau responsive qui inverse les lignes et les colonnes #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd2bf2b
Une forme de tableau responsive qui inverse les lignes et les colonnes
lipki Apr 16, 2014
4f72888
Modification du fichier typo.less
lipki Apr 17, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions css/tinytypo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -488,6 +488,63 @@ table {
white-space: nowrap;
}
}
@media (max-width: 640px) {
.flip-table-responsive table {
border-collapse: collapse;
border-spacing: 0;
display: block;
position: relative;
width: 100%;
}
.flip-table-responsive caption {
width: 100%;
}
.flip-table-responsive thead {
display: block;
float: left;
}
.flip-table-responsive tfoot {
display: block;
float: right;
}
.flip-table-responsive thead tr,
.flip-table-responsive tfoot tr {
display: block;
border-right: 1px solid;
border-left: 1px solid;
}
.flip-table-responsive tbody {
display: block;
width: auto;
position: relative;
overflow-x: auto;
white-space: nowrap;
}
.flip-table-responsive tbody tr {
display: inline-block;
vertical-align: top;
}
.flip-table-responsive tbody tr:last-child {
border-right: 0;
}
.flip-table-responsive th,
.flip-table-responsive td {
margin: 0;
vertical-align: top;
border-bottom: 0;
}
.flip-table-responsive tr {
border-right: 1px solid;
}
.flip-table-responsive th {
text-align: left;
display: block;
}
.flip-table-responsive td {
display: block;
text-align: left;
}
}
/* Quotes, code and poetry */
q {
quotes: "\201C" "\201D" "\2018" "\2019";
Expand Down
19 changes: 18 additions & 1 deletion less/typo.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,23 @@ table { max-width: 100%; border-collapse: collapse; border-spacing: 0; }
.table-responsive td { white-space: nowrap; }
}

@media (max-width: @screen-medium) {
.flip-table-responsive table { border-collapse: collapse; border-spacing: 0; display: block; position: relative; width: 100%; }
.flip-table-responsive caption { width: 100%; }
.flip-table-responsive thead { display: block; float: left; }
.flip-table-responsive tfoot { display: block; float: right; }
.flip-table-responsive thead tr,
.flip-table-responsive tfoot tr { display: block; border-right: 1px solid; border-left: 1px solid; }
.flip-table-responsive tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
.flip-table-responsive tbody tr { display: inline-block; vertical-align: top; }
.flip-table-responsive tbody tr:last-child { border-right: 0; }
.flip-table-responsive th,
.flip-table-responsive td { margin: 0; vertical-align: top; border-bottom: 0; }
.flip-table-responsive tr { border-right: 1px solid; }
.flip-table-responsive th { text-align: left; display: block; }
.flip-table-responsive td { display: block; text-align: left; }
}

/* Quotes, code and poetry */
q { quotes: "\201C" "\201D" "\2018" "\2019"; } // “ ” ‘ ’
:lang(en)>q { quotes: "\201C" "\201D" "\2018" "\2019" } // “ ” ‘ ’
Expand Down Expand Up @@ -247,4 +264,4 @@ Inlined to avoid required HTTP connection: h5bp.com/r */
@page { margin: 2cm .5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
}
50 changes: 49 additions & 1 deletion tinytypo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -587,6 +587,54 @@ <h2>Tableaux de données</h2>
</tbody>
</table>
</div>

<p>
Dans le cas d'un tableau trop large pour être contenu dans un écran d'appareil mobile par exemple.
Le sélecteur CSS .flip-table-responsive, permet d'échanger les lignes et les colonnes et de maintenir les entêtes visibles à gauche
Ce sélecteur ne fonctionne pas avec les cellules fusionnées.
</p>

<div class="flip-table-responsive">
<table class="table">
<caption>Titre du tableau</caption>
<thead>
<tr>
<th scope="col">entête</th>
<th scope="col">R</th>
<th scope="col">V</th>
<th scope="col">B</th>
</tr>
</thead>
<tfoot>
<tr>
<td>footer</td>
<td>footer</td>
<td>footer</td>
<td>footer</td>
</tr>
</tfoot>
<tbody>
<tr class="odd">
<td>Red</td>
<td>255</td>
<td>0</td>
<td>0</td>
</tr><!--
--><tr class="even">
<td>Green</td>
<td>0</td>
<td>255</td>
<td>0</td>
</tr><!--
--><tr class="odd">
<td>Blue</td>
<td>0</td>
<td>0</td>
<td>255</td>
</tr>
</tbody>
</table>
</div>
</section>


Expand Down Expand Up @@ -688,7 +736,7 @@ <h3>Alignements</h3>

<div class="text-justify">
<p>Texte justifié avec <code>.text-justify</code>. Il est possible de justifier le texte, c'est-à-dire que toutes les lignes d'un paragraphe aient la même longueur. Est-ce intéressant de le faire&nbsp;? D'un point de vue de lisibilité, des études montrent qu'un texte en drapeau est plus accessible à l'œil&nbsp;: l'irrégularité des fins de lignes sert de repère visuel et fatigue moins le lecteur. Pourtant, un alignement justifié donne un résultat esthétique plus agréable et une impression de plus grande régularité.
<br>Lire le conseil sur ergologique.com&nbsp;: <a href="http://www.ergologique.com/conseils/conseils.php?id_tip=818" rel="external" class="external">Le texte se justifie-t-il&nbsp;?</a></p>
<br>Lire le conseil sur ergologique.com&nbsp;: <a href="http://www.ergologique.com/conseils/conseils.php?id_tip=818" rel="external" class="external">Le texte se justifie-t-il&nbsp;?</a></p>
</div>
<div class="text-left">
<p>Texte ferré à gauche avec <code>.text-left</code>. Il ne faut pas confondre le terme de justification avec l'expression « justifié » à gauche ou à droite souvent employée à tort à la place de « ferré » à gauche ou à droite. Les textes sont par défaut ferrés à gauche et sont par nature, selon la taille de l'écran, sa définition et la taille de la fenêtre dans laquelle le texte apparaît, d'une justification plus ou moins longue.</p>
Expand Down