Tagtable

[Docker] Faire un dump d’une table spécifique dans une base de données et récupérer le contenu dans un fichier txt hors container

Note: pour faire la même chose, mais via mysql: Dump a specific table or few rows (MySQL). $ mysqldump -u username -ppassword database_name table_name > single_table_dump.sql

Faire un dump d’une table spécifique via un container db Docker:

Log toi dans le container db

après : $ mysqldump  -uroot -proot magento core_config_data --tab="/tmp" --fields-enclosed-by='"' --fields-terminated-by=,

ce qui nous intéresse, c’est le fichier /tmp/core_config_data.txt qui sera généré. tu le copie via docker cp.

ça doit te donner un rendu qui ressemble à ça (sample):

Récupérer le contenu du dump dans un fichier TXT avec la commande docker cp:

Sortir du container db. On se retrouve à la racine de notre projet.

en décomposant : $ docker cp nom_du_container:path_dans_le_container path_local (. == l'endroit où tu es)

Le fichier core_config_data.txt devrait être disponible à la racine de notre projet (où à l’endroit depuis lequel la commande ci-dessus a été exécutée).

[AngularJS] Utiliser ng-hide et $index pour gérer nativement un rowspan ou un colspan dans une boucle ng-repeat (dans un tableau HTML)

Pas tenté: mais peut probablement être utilisé également avec l’attribut HTML colspan.

Il suffit d’ajouter un attribut ng-hide="$index>0" sur l’ensemble des cellules du tableau qui contiennent l’attribut rowspan.
Source jsfiddle.net: AngularJS: ngRepeat & rowspan.

[CSS] La propriété column-count (ou columns) coupe mes rangées de tableaux de façon arbitraire

Source: How to prevent column break within an element?.

Problème:

Solution:

[Responsive design][SASS] Un tableau responsive en mode No More Tables (version 2017)

Sources sur github.com – responsive-tables.

Source de départ: No more tables – This technique was developed by Chris Coyier (@chriscoyier) and described in his post Responsive Data Tables at css-tricks.com. While you’re there, you should probably check out the Responsive Tables Roundup post, which showcases all these techniques and more.

Demo JSFiddle.net

jQuery (si besoin de fixer les hauteurs des rangées)

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

[CSS] Des entités HTML en guise de séparateurs de colonnes d’en-têtes de tableaux

table-th-style

[CSS] Des tableaux responsives en full CSS

Ressources en ligne :

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Simulation JSfiddle.net (avec code source propre), demo.

table-comparison-one_desktop-mobile

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

Nouveau: une version plus flexible basée sur Flexbox (sources core). https://jsfiddle.net/frontenddeveloper/ay5v30p5/

…et la gueule de cette version Flexbox sous IE11:


Simulation JSfiddle.net (avec code source propre). Attention : la partie commentée du code CSS ne semble pas adaptée à notre exemple.

table2_desktop-mobile

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

Source et simulation (Flip Scroll) : http://elvery.net/demo/responsive-tables/#flip-scroll.

Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.

Version SASS de flip-scroll

Version SASS de No More Tables

Source : http://elvery.net/demo/responsive-tables/#no-more-tables.

Attention : ajouter un !important à td { padding-left: 50%; } si vous utilisez Twitter Bootstrap pour styler vos tableaux.

Ajout d’une classe .ignore à placer sur les <td /> qui ne doivent pas faire l’objet d’une transformation. La rangée du tableau transformé n’aura alors pas de libellé (en-tête).

En utilisant display: block; et les data attributes HTML5 :

Source : http://codepen.io/geoffyuen/pen/FCBEg.

Simulation : http://jsfiddle.net/frontenddeveloper/gf7R3/.

Mixin SASS

[CSS] Forcer une liste non ordonnée (ul) à se comporter en tableau HTML avec la pseudo-classe nth-child, la propriété box-sizing et la fonction calc

list-table

Nouvelle version :

Autre solution, mieux écrite, exploitant la propriété CSS box-sizing: border-box; : http://jsfiddle.net/frontenddeveloper/795Cc/4/.

Sources :

Prise en charge : IE9+ (IE8+ sans l’utilisation de la fonction calc pour pallier à un bug de largeur sur le dernier élément de la liste).


<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
  <li><a class="link" href="#">01</a></li>
  <li><a class="link" href="#">02</a></li>
  <li>03</li>
  <li>04</li>
  <li><a class="link" href="#">05</a></li>
  <li><a class="link" href="#">06</a></li>
  <li class="current"><strong>07</strong></li>
  <li><a class="link" href="#">08</a></li>    
  <li><a class="link" href="#">09</a></li>
  <li><a class="link" href="#">10</a></li>
  <li><a class="link" href="#">11</a></li>
  <!--li><a class="link" href="#">12</a></li-->    
</ul>


.sizes-list{
  width: 100%;
  float: left;
  margin-bottom: 16px;
}

.sizes-list li{
  float: left;
  text-align: center;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
}

/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
  clear: left;
}

/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
  clear: none;
}

.sizes-list li{
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-right-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}

.sizes-list li{
  width: 20%;    
}

.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
  width: calc(20% + 3px);
  border-color: red; 
}

.sizes-list li:nth-child(5n+5):last-child{
  width: 20%;
  border-color: olive;
}

.sizes-list.four-columns-rows li{
  width: 25%;
}

.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: calc(25% + 3px);
  border-color: red;
}

.sizes-list.four-columns-rows li:nth-child(4n+4):last-child{
  width: 25%;
  border-color: olive;
}

/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
  margin-top: -3px;
}

.sizes-list,
.sizes-list a.link{
  color: #50494c;
  text-decoration: none;
}

.sizes-list li.current{
  background-color: #e5e5e5;
}

/*
.sizes-list a.link,
.sizes-list strong{
  display: block;
  padding: 8px 0;
}
*/

.sizes-list li:last-child,
.sizes-list li:nth-child(5n+5),
.sizes-list.four-columns-rows li:nth-child(4n+4),
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child{
  border-right-width: 3px;
}

.sizes-list.four-columns-rows li:nth-child(5n+5){
  border-right-width: 0;
}

Ancienne version :

Test en live : http://jsfiddle.net/frontenddeveloper/As8BQ/.

La liste comportera des cellules à largeurs flexibles (déclarées en pourcentages (%)). Le tableau affiche par défaut 5 colonnes. L’ajout de la classe .four-columns-rows affichera un tableau de 4 colonnes.


<ul class="sizes-list four-columns-rows"><!-- ajouter la classe '.four-columns-rows' pour une liste en 4 colonnes (standard à 5 colonnes) -->
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><strong></strong></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
  <li><a class="link" href="#"></a></li>
</ul>


.sizes-list{
  width: 100%;
  float: left;
  margin-bottom: 16px;
}

.sizes-list li{
  float: left;
  text-align: center;
}

/* On passe à la ligne tous les 5 éléments (ou tous les 4 éléments pour la version 4 colonnes) */
.sizes-list li:nth-child(5n+1),
.sizes-list.four-columns-rows li:nth-child(4n+1){
  clear: left;
}

/* On annule le passage à la ligne tous les 5 éléments pour la version 4 colonnes */
.sizes-list.four-columns-rows li:nth-child(5n+1){
  clear: none;
}

.sizes-list li{
  width: 20%;
}

/* [standard 5 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 6ème élément inclus */
.sizes-list li:nth-child(-n+4):last-child,
.sizes-list li:nth-child(n+6):last-child{
  width: 20.97%;
}

/* [4 colonnes] Si le dernier élément de la liste est l'un des 4 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li,
.sizes-list.four-columns-rows li:nth-child(-n+4):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: 25%;
}

/* [4 colonnes] Si le dernier élément de la liste est l'un des 3 premiers ou se trouve après le 5ème élément inclus */
.sizes-list.four-columns-rows li:nth-child(-n+3):last-child,
.sizes-list.four-columns-rows li:nth-child(n+5):last-child{
  width: 25.97%;
}

/* Pour tous les éléments à partir du 6ème (ou à partir du 5ème pour la version 4 colonnes) */
.sizes-list li:nth-child(n+6),
.sizes-list.four-columns-rows li:nth-child(n+5){
  margin-top: -3px;
}

.sizes-list a.link,
.sizes-list strong{
  display: block;
  padding: 8px 0;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-right-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}

.sizes-list,
.sizes-list a.link{
  color: #50494c;
  text-decoration: none;
}

.sizes-list strong{
  background-color: #e5e5e5;
}

/*
.sizes-list li:nth-child(5n+1) a.link,
.sizes-list li:nth-child(5n+1) strong,
.sizes-list.four-columns-rows li:nth-child(4n+1) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+1) strong{
  border-left-width: 3px;
}
*/

.sizes-list li:last-child a.link,
.sizes-list li:last-child strong,
.sizes-list li:nth-child(5n+5) a.link,
.sizes-list li:nth-child(5n+5) strong,
.sizes-list.four-columns-rows li:nth-child(4n+4) a.link,
.sizes-list.four-columns-rows li:nth-child(4n+4) strong,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5):last-child strong{
  border-right-width: 3px;
}

.sizes-list.four-columns-rows li:nth-child(5n+5) a.link,
.sizes-list.four-columns-rows li:nth-child(5n+5) strong{
  border-right-width: 0;
}

[CSS] border-radius sur des tables

Ajouter la propriété border-collapse: separate; à la balise table afin que les border-radius soient pris en compte.

[CSS] Aligner un texte verticalement avec display:table, display:table-cell et vertical-align:middle

Centrer un texte en hauteur avec CSS, dans un menu horizontal de navigation par exemple…

centrer_texte_en_hauteur

Simulation : http://jsfiddle.net/frontenddeveloper/Qrz58/16/

Une variante : le menu se comporte réellement comme un tableau HTML

variante

Simulation : http://jsfiddle.net/frontenddeveloper/5nkFV/2/

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑