Étiquette : table

[Magento 2] Changer la valeur de l’attribut Colspan dans les tableaux des commandes du compte client

08/12/2020 / admin

Vous allez trouver des valeurs pour l’attribut colspan dans certains Layouts. Exemple ici: /Magento/Sales/view/frontend/layout/sales_order_view.xml#L32 pour les tableaux ayant la classe .sales-order-view.

<argument name="label_properties" xsi:type="string">colspan="4" class="mark"</argument>

1	<argument name="label_properties" xsi:type="string">colspan="4" class="mark"</argument>

[Magento 2] Modifier les stocks directement depuis la base de données

05/11/2020 / admin

Source: Magento 2, Database Level Inventory Management. Version PDF pour la postérité: danjoseph.me-Magento 2 Database Level Inventory Management.

Retrouver un produit dans la table `cataloginventory_stock_item`

Utiliser la valeur de product_id qui est visible dans le DOM lorsque le produit est sélectionné, en tant que valeur d’un attribut value pour l’élément input name="selected_configurable_option".

Quelques notes:

La valeur de la clé is_in_stock dans la table cataloginventory_stock_item doit rester à 1 si vous souhaitez que la configuration de votre produit reste visible dans l’élément SELECT.

[Magento 2] Eviter la redirection automatique de mon instance locale vers la prod lorsque j’affiche une page dans mon navigateur

29/10/2020 / admin

Pour le frontoffice

Dans la table core_config_data, faire une recherche sur l’URL vers laquelle vous êtes redirigé et remplacer toutes les occurrences (au moins les « unsecure » qui sont préfixées par http) par votre URL locale.

Pour le backoffice

Dans la table core_config_data, rechercher (n’importe où) | LIKE %% | url.

Vérifier que la ligne contenant le path admin/url/use_custom est à 0.

Ensuite, pour toutes les lignes où l’URL déclarée dans la colonne value est celle du domaine vers lequel on est redirigé, remplacer toutes les occurrences par votre URL locale.

Pour finir, exécuter la commande $ php bin/magento ca:cl config.

[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

17/04/2020 / admin

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):

"1","default","0","yotpo/module_info/yotpo_installation_date","2020-02-12","2020-02-28 11:06:07"

1	"1","default","0","yotpo/module_info/yotpo_installation_date","2020-02-12","2020-02-28 11:06:07"

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.

$ docker cp vitalconcept_db_1:/tmp/core_config_data.txt .

1	$ docker cp vitalconcept_db_1:/tmp/core_config_data.txt .

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)

03/04/2019 / admin

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.

        <tbody ng-repeat="group in groups">
            <tr ng-repeat="member in group.members">
                <td rowspan="{{group.members.length}}" ng-hide="$index>0">
                </td>
            </tr>
        </tbody>

</td>

</tr>

</tbody>

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

29/11/2017 / admin

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

Problème:

.tabs-panel {
  column-count: 2;
}

.tabs-panel {

column-count: 2;

}

Solution:

.tabs-panel {
  column-count: 2;
  table {
    margin-bottom: 0;
    tr {
      -webkit-column-break-inside: avoid; /* Chrome, Safari */
      page-break-inside: avoid;           /* Theoretically FF 20+ */
      break-inside: avoid-column;         /* IE 11 */
      display: table;                     /* Actually FF 20+ */ 
      width: 100%;
      td {
        width: 50%;
      }
    }
  }
}

.tabs-panel {

column-count: 2;

table {

margin-bottom: 0;

tr {

-webkit-column-break-inside: avoid; /* Chrome, Safari */

page-break-inside: avoid; /* Theoretically FF 20+ */

break-inside: avoid-column; /* IE 11 */

display: table; /* Actually FF 20+ */

width: 100%;

td {

width: 50%;

}

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

18/09/2017 / admin

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

@mixin no-more-tables-core() {
  /* Force table to not be like tables anymore */
	table, 
	thead, 
	tbody, 
	th, 
	td, 
	tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
		white-space: normal;
    &:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      white-space: nowrap;
      /* Label the data	*/
      content: attr(data-title);
    }
	}
}

@mixin no-more-tables-skin(
  $thead-width: 33.33333%,
  $border-width: 1px, 
  $border-color: #ccc,
  $padding-y: 8px,
  $padding-x: 10px,
  $text-align: left,
  $thead-font-weight: 700){
  tr {
    border: $border-width solid $border-color;
  }
  td { 
    /* Behave  like a "row" */
    border-bottom: $border-width solid $border-color; 
    padding-left: $thead-width; 
    text-align: $text-align;
    &:before {
      /* Top/left values mimic padding */
      top: $padding-y;
      left: $padding-x;
      width: $thead-width - ($thead-width/10); 
      padding-right: $padding-x; 
      text-align: $text-align;
      font-weight: $thead-font-weight;
    }
  }
}

.no-more-tables {
  @include no-more-tables-core();
  @include no-more-tables-skin();
}

@mixin no-more-tables-core() {

/* Force table to not be like tables anymore */

table,

thead,

tbody,

th,

td,

tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

td {

/* Behave like a "row" */

border: none;

position: relative;

white-space: normal;

&:before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

white-space: nowrap;

/* Label the data */

content: attr(data-title);

}

@mixin no-more-tables-skin(

$thead-width: 33.33333%,

$border-width: 1px,

$border-color: #ccc,

$padding-y: 8px,

$padding-x: 10px,

$text-align: left,

$thead-font-weight: 700){

tr {

border: $border-width solid $border-color;

}

td {

/* Behave like a "row" */

border-bottom: $border-width solid $border-color;

padding-left: $thead-width;

text-align: $text-align;

&:before {

/* Top/left values mimic padding */

top: $padding-y;

left: $padding-x;

width: $thead-width - ($thead-width/10);

padding-right: $padding-x;

text-align: $text-align;

font-weight: $thead-font-weight;

}

.no-more-tables {

@include no-more-tables-core();

@include no-more-tables-skin();

}

<div class="no-more-tables">
  <table>
    <thead>
      <tr>
        <th>Code</th>
        <th>Company</th>
        <th>Price</th>
        <th>Change</th>
        <th>Change %</th>
        <th>Open</th>
        <th>High</th>
        <th>Low</th>
        <th>Volume</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="Code">AAC</td>
        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
        <td data-title="Price">$1.38</td>
        <td data-title="Change">-0.01</td>
        <td data-title="Change %">-0.36%</td>
        <td data-title="Open">$1.39</td>
        <td data-title="High">$1.39</td>
        <td data-title="Low">$1.38</td>
        <td data-title="Volume">9,395</td>
      </tr>
      <tr>
        <td data-title="Code">AAD</td>
        <td data-title="Company">ARDENT LEISURE GROUP</td>
        <td data-title="Price">$1.15</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">1.32%</td>
        <td data-title="Open">$1.14</td>
        <td data-title="High">$1.15</td>
        <td data-title="Low">$1.13</td>
        <td data-title="Volume">56,431</td>
      </tr>
      <tr>
        <td data-title="Code">AAX</td>
        <td data-title="Company">AUSENCO LIMITED</td>
        <td data-title="Price">$4.00</td>
        <td data-title="Change">-0.04</td>
        <td data-title="Change %">-0.99%</td>
        <td data-title="Open">$4.01</td>
        <td data-title="High">$4.05</td>
        <td data-title="Low">$4.00</td>
        <td data-title="Volume">90,641</td>
      </tr>
      <tr>
        <td data-title="Code">ABC</td>
        <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
        <td data-title="Price">$3.00</td>
        <td data-title="Change">  +0.06</td>
        <td data-title="Change %">2.04%</td>
        <td data-title="Open">$2.98</td>
        <td data-title="High">$3.00</td>
        <td data-title="Low">$2.96</td>
        <td data-title="Volume">862,518</td>
      </tr>
      <tr>
        <td data-title="Code">ABP</td>
        <td data-title="Company">ABACUS PROPERTY GROUP</td>
        <td data-title="Price">$1.91</td>
        <td data-title="Change">0.00</td>
        <td data-title="Change %">0.00%</td>
        <td data-title="Open">$1.92</td>
        <td data-title="High">$1.93</td>
        <td data-title="Low">$1.90</td>
        <td data-title="Volume">595,701</td>
      </tr>
      <tr>
        <td data-title="Code">ABY</td>
        <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>
        <td data-title="Price">$0.77</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">2.00%</td>
        <td data-title="Open">$0.76</td>
        <td data-title="High">$0.77</td>
        <td data-title="Low">$0.76</td>
        <td data-title="Volume">54,567</td>
      </tr>
      <tr>
        <td data-title="Code">ACR</td>
        <td data-title="Company">ACRUX LIMITED</td>
        <td data-title="Price">$3.71</td>
        <td data-title="Change">  +0.01</td>
        <td data-title="Change %">0.14%</td>
        <td data-title="Open">$3.70</td>
        <td data-title="High">$3.72</td>
        <td data-title="Low">$3.68</td>
        <td data-title="Volume">191,373</td>
      </tr>
      <tr>
        <td data-title="Code">ADU</td>
        <td data-title="Company">ADAMUS RESOURCES LIMITED</td>
        <td data-title="Price">$0.72</td>
        <td data-title="Change">0.00</td>
        <td data-title="Change %">0.00%</td>
        <td data-title="Open">$0.73</td>
        <td data-title="High">$0.74</td>
        <td data-title="Low">$0.72</td>
        <td data-title="Volume">8,602,291</td>
      </tr>
      <tr>
        <td data-title="Code">AGG</td>
        <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>
        <td data-title="Price" class="numeric">$7.81</td>
        <td data-title="Change" class="numeric">-0.22</td>
        <td data-title="Change %" class="numeric">-2.74%</td>
        <td data-title="Open" class="numeric">$7.82</td>
        <td data-title="High" class="numeric">$7.82</td>
        <td data-title="Low" class="numeric">$7.81</td>
        <td data-title="Volume" class="numeric">148</td>
      </tr>
      <tr>
        <td data-title="Code">AGK</td>
        <td data-title="Company">AGL ENERGY LIMITED</td>
        <td data-title="Price">$13.82</td>
        <td data-title="Change">  +0.02</td>
        <td data-title="Change %">0.14%</td>
        <td data-title="Open">$13.83</td>
        <td data-title="High">$13.83</td>
        <td data-title="Low">$13.67</td>
        <td data-title="Volume">846,403</td>
      </tr>
      <tr>
        <td data-title="Code">AGO</td>
        <td data-title="Company">ATLAS IRON LIMITED</td>
        <td data-title="Price">$3.17</td>
        <td data-title="Change">-0.02</td>
        <td data-title="Change %">-0.47%</td>
        <td data-title="Open">$3.11</td>
        <td data-title="High">$3.22</td>
        <td data-title="Low">$3.10</td>
        <td data-title="Volume">5,416,303</td>
      </tr>
    </tbody>
  </table>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

<table>

<thead>

<tr>

<th>Company</th>

<th>Price</th>

<th>Change</th>

<th>Change %</th>

<th>Volume</th>

</tr>

</thead>

<tbody>

<tr>

<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>

</tr>

<tr>

<td data-title="Company">ARDENT LEISURE GROUP</td>

</tr>

<tr>

<td data-title="Company">AUSENCO LIMITED</td>

</tr>

<tr>

<td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>

</tr>

<tr>

<td data-title="Company">ABACUS PROPERTY GROUP</td>

</tr>

<tr>

<td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>

</tr>

<tr>

<td data-title="Company">ACRUX LIMITED</td>

</tr>

<tr>

<td data-title="Company">ADAMUS RESOURCES LIMITED</td>

</tr>

<tr>

<td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>

</tr>

<tr>

<td data-title="Company">AGL ENERGY LIMITED</td>

</tr>

<tr>

<td data-title="Company">ATLAS IRON LIMITED</td>

</tr>

</tbody>

</table>

</div>

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

    $('.no-more-tables td').each(function(){
      var $this = $(this);
      var thisHeight = $this.height();
      var thisGetZero = $this.get(0);
      var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height;
      var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10);
      var thisPaddingY = 8;

      if(thisHeight > thisBeforeHeight) {
        $this.css('height', thisHeight + (thisPaddingY*2) + 'px');
      }
      if(thisHeight < thisBeforeHeight) {
        $this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px');
      }
      else if(thisHeight == thisBeforeHeight) {
        $this.css('height', thisHeight + (thisPaddingY*2) + 'px');
      }
    });

$('.no-more-tables td').each(function(){

var $this = $(this);

var thisHeight = $this.height();

var thisGetZero = $this.get(0);

var thisBeforeHeightPx = window.getComputedStyle(thisGetZero, ':before').height;

var thisBeforeHeight = parseInt(thisBeforeHeightPx, 10);

var thisPaddingY = 8;

if(thisHeight > thisBeforeHeight) {

$this.css('height', thisHeight + (thisPaddingY*2) + 'px');

}

if(thisHeight < thisBeforeHeight) {

$this.css('height', thisBeforeHeight + (thisPaddingY*2) + 'px');

}

else if(thisHeight == thisBeforeHeight) {

$this.css('height', thisHeight + (thisPaddingY*2) + 'px');

}

});

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

24/03/2017 / admin

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 :

.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

1	.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

Source: Responsive Images in display: table-cell – A PEN BY Matt Stow.
Voir également: Why do Firefox and Opera ignore max-width inside of display: table-cell?.

<p>Normal "responsive" image</p>
<img src="http://placehold.it/650x150" />

<p>Image in a display: table-cell</p>
<div class="cell"><img src="http://placehold.it/650x150" /></div>

<p>Image in a display: table-cell with width: 100%</p>
<div class="cell"><img src="http://placehold.it/650x150" class="cell-fluid" /></div>

<p>Normal "responsive" image</p>

<p>Image in a display: table-cell</p>

<p>Image in a display: table-cell with width: 100%</p>

img {
  height: auto;
  max-width: 100%;
}

.cell {
  display: table-cell;
}

.cell-fluid {
  width: 100%;
}

img {

height: auto;

max-width: 100%;

}

.cell {

display: table-cell;

}

.cell-fluid {

width: 100%;

}

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

10/11/2014 / admin

table.normal tr th:after{
	content: "|";
	float: right;
	width: 1px;
	height: auto;
	margin-right: -1px;
}

table.normal tr th:after{

content: "|";

float: right;

width: 1px;

height: auto;

margin-right: -1px;

}

[CSS] Des tableaux responsives en full CSS

09/06/2014 / admin

Ressources en ligne :

Responsive Data Tables sur CSS Tricks. Un tableau qui permute les en-têtes sur la 1ère colonne en mobile.
Attention, ne fonctionnera PAS pour des sites multilingues, à moins peut-être de passer le contenu localisé (texte inclus dans la CSS pour cet exemple) via du JS peut-être?
CSS Tricks – Responsive Data Table Roundup
Demo of Tablesaw : A group of plugins for responsive tables.
Responsive table with vertical and horizontal headers, 2 (voir le CodePen)
Responsive Tables (Zurb) avec du JS.

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.

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.

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.

<table>
<thead>
<tr>
<th>Code</th>
<th>Company</th>
<th class="numeric">Price</th>
<th class="numeric">Change</th>
<th class="numeric">Change %</th>
<th class="numeric">Open</th>
<th class="numeric">High</th>
<th class="numeric">Low</th>
<th class="numeric">Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>AAC</td>
<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td class="numeric">$1.38</td>
<td class="numeric">-0.01</td>
<td class="numeric">-0.36%</td>
<td class="numeric">$1.39</td>
<td class="numeric">$1.39</td>
<td class="numeric">$1.38</td>
<td class="numeric">9,395</td>
</tr>
</tbody>
</table>

<table>

<thead>

<tr>

<th>Company</th>

<th class="numeric">Price</th>

<th class="numeric">Change</th>

<th class="numeric">Change %</th>

<th class="numeric">Volume</th>

</tr>

</thead>

<tbody>

<tr>

<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>

</tr>

</tbody>

</table>

@media only screen and (max-width: 800px) {
#flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#flip-scroll * html .cf { zoom: 1; }
#flip-scroll *:first-child+html .cf { zoom: 1; }
#flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }
 
#flip-scroll th,
#flip-scroll td { margin: 0; vertical-align: top; }
#flip-scroll th { text-align: left; }
#flip-scroll table { display: block; position: relative; width: 100%; }
#flip-scroll thead { display: block; float: left; }
#flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
#flip-scroll thead tr { display: block; }
#flip-scroll th { display: block; text-align: right; }
#flip-scroll tbody tr { display: inline-block; vertical-align: top; }
#flip-scroll td { display: block; min-height: 1.25em; text-align: left; }
 
 
/* sort out borders */
 
#flip-scroll th { border-bottom: 0; border-left: 0; }
#flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }
#flip-scroll tbody tr { border-left: 1px solid #babcbf; }
#flip-scroll th:last-child,
#flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
}

@media only screen and (max-width: 800px) {

#flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

#flip-scroll * html .cf { zoom: 1; }

#flip-scroll *:first-child+html .cf { zoom: 1; }

#flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }

#flip-scroll th,

#flip-scroll td { margin: 0; vertical-align: top; }

#flip-scroll th { text-align: left; }

#flip-scroll table { display: block; position: relative; width: 100%; }

#flip-scroll thead { display: block; float: left; }

#flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }

#flip-scroll thead tr { display: block; }

#flip-scroll th { display: block; text-align: right; }

#flip-scroll tbody tr { display: inline-block; vertical-align: top; }

#flip-scroll td { display: block; min-height: 1.25em; text-align: left; }

/* sort out borders */

#flip-scroll th { border-bottom: 0; border-left: 0; }

#flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }

#flip-scroll tbody tr { border-left: 1px solid #babcbf; }

#flip-scroll th:last-child,

#flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }

}

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.

    var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){
      return $(val).outerHeight();
    });
    // console.log(listHeight);

    $('.table-flip-scroll tbody tr:not(.sort)').each(function(){
      var count = 0;
      $(this).children('td').each(function(){
        $(this).css('height', listHeight[count ++] + 'px');
      });
    });

var listHeight = $.map($('.thead-first-row').children('th:not(.large)'), function(val){

return $(val).outerHeight();

});

// console.log(listHeight);

$('.table-flip-scroll tbody tr:not(.sort)').each(function(){

var count = 0;

$(this).children('td').each(function(){

$(this).css('height', listHeight[count ++] + 'px');

});

Version SASS de flip-scroll

/* flip-scroll table */
.flip-scroll {
  .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
  * html .cf { zoom: 1; }
  *:first-child+html .cf { zoom: 1; }

  table { width: 100%; border-collapse: collapse; border-spacing: 0; }
  th,
  td { margin: 0; vertical-align: top; }
  th { text-align: left; }

  table { display: block; position: relative; width: 100%; }
  thead { display: block; float: left; }
  tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
  thead tr { display: block; }
  th { display: block; text-align: right; }
  tbody tr { display: inline-block; vertical-align: top; }
  td { display: block; min-height: 1.25em; text-align: left; }

  /* sort out borders */
  th { border-bottom: 0; border-left: 0; }
  td { border-left: 0; border-right: 0; border-bottom: 0; }
  tbody tr { border-left: 1px solid #babcbf; }
  th:last-child,
  td:last-child { border-bottom: 1px solid #babcbf; }
}

/* flip-scroll table */

.flip-scroll {

.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

* html .cf { zoom: 1; }

*:first-child+html .cf { zoom: 1; }

table { width: 100%; border-collapse: collapse; border-spacing: 0; }

th,

td { margin: 0; vertical-align: top; }

th { text-align: left; }

table { display: block; position: relative; width: 100%; }

thead { display: block; float: left; }

tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }

thead tr { display: block; }

th { display: block; text-align: right; }

tbody tr { display: inline-block; vertical-align: top; }

td { display: block; min-height: 1.25em; text-align: left; }

/* sort out borders */

th { border-bottom: 0; border-left: 0; }

td { border-left: 0; border-right: 0; border-bottom: 0; }

tbody tr { border-left: 1px solid #babcbf; }

th:last-child,

td:last-child { border-bottom: 1px solid #babcbf; }

}

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).

/* no-more-tables table */
.no-more-tables {
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid $table-border-color;
    margin-bottom: $padding-base-vertical;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid $table-border-color;
    position: relative;
    padding-left: 50% !important;
    white-space: normal;
    text-align:left;

    &.ignore {
      padding-left: $table-cell-padding !important;
    }
  }

  td:not(.ignore):before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: $table-cell-padding;
    left: $table-cell-padding;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-align:left;
    font-weight: bold;
  }

  /* Label the data */
  td:not(.ignore):before {
    content: attr(data-title) ' :';
    color: $brand-quaternary;
  }
}

@media (min-width: $screen-xs1) {
  .no-more-tables {
    td {
      padding-left: 30% !important;
    }
    td:not(.ignore):before {
      width: 25%;
    }
  }
}

/* no-more-tables table */

.no-more-tables {

/* Force table to not be like tables anymore */

table,

thead,

tbody,

th,

td,

tr {

display: block;

}

/* Hide table headers (but not display: none;, for accessibility) */

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

}

tr {

border: 1px solid $table-border-color;

margin-bottom: $padding-base-vertical;

}

td {

/* Behave like a "row" */

border: none;

border-bottom: 1px solid $table-border-color;

position: relative;

padding-left: 50% !important;

white-space: normal;

text-align:left;

&.ignore {

padding-left: $table-cell-padding !important;

}

td:not(.ignore):before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

top: $table-cell-padding;

left: $table-cell-padding;

width: 45%;

padding-right: 10px;

white-space: nowrap;

text-align:left;

font-weight: bold;

}

/* Label the data */

td:not(.ignore):before {

content: attr(data-title) ' :';

color: $brand-quaternary;

}

@media (min-width: $screen-xs1) {

.no-more-tables {

td {

padding-left: 30% !important;

}

td:not(.ignore):before {

width: 25%;

}

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

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

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

<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>

<tr>

<th>Movie Title</th>

<th>Genre</th>

<th>Gross</th>

</tr>

<tr>

<td data-th="Genre">Adventure, Sci-fi</td>

</tr>

<tr>

<td data-th="Movie Title">Howard The Duck</td>

<td data-th="Genre">"Comedy"</td>

</tr>

<tr>

<td data-th="Movie Title">American Graffiti</td>

<td data-th="Genre">Comedy, Drama</td>

</tr>

</table>

.rwd-table {
  min-width: 300px;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}

.rwd-table {

min-width: 300px;

}

.rwd-table th {

display: none;

}

.rwd-table td {

display: block;

}

.rwd-table td:first-child {

padding-top: .5em;

}

.rwd-table td:last-child {

padding-bottom: .5em;

}

.rwd-table td:before {

content: attr(data-th) ": ";

width: 6.5em;

display: inline-block;

}

@media (min-width: 480px) {

.rwd-table td:before {

display: none;

}

.rwd-table th, .rwd-table td {

text-align: left;

}

@media (min-width: 480px) {

.rwd-table th, .rwd-table td {

display: table-cell;

padding: .25em .5em;

}

.rwd-table th:first-child, .rwd-table td:first-child {

padding-left: 0;

}

.rwd-table th:last-child, .rwd-table td:last-child {

padding-right: 0;

}

Mixin SASS

@mixin rwd-table() {
  min-width: 300px;
  th {
    display: none;
  }
  td {
    display: block;
    padding: 5px 10px !important;
  }
  td:first-child {
    // padding-top: .5em;
  }
  td:last-child {
    // padding-bottom: .5em;
  }
  td:before {
    // content: attr(data-th) ": ";
    content: attr(data-th);
    width: 6.5em;
    display: inline-block;
    font-family: $site-bold-font-family;
    color: $site-font-color-darker;
  }
  @media (min-width: $screen-sm-min) {
    td:before {
      display: none;
    }
  }
  th, td {
    text-align: left;
  }
  @media (min-width: $screen-sm-min) {
    th, td {
      display: table-cell;
      // padding: .25em .5em;
    }
    th:first-child, td:first-child {
      padding-left: 0;
    }
    th:last-child, td:last-child {
      padding-right: 0;
    }
  }
}

@mixin rwd-table() {

min-width: 300px;

th {

display: none;

}

td {

display: block;

padding: 5px 10px !important;

}

td:first-child {

// padding-top: .5em;

}

td:last-child {

// padding-bottom: .5em;

}

td:before {

// content: attr(data-th) ": ";

content: attr(data-th);

width: 6.5em;

display: inline-block;

font-family: $site-bold-font-family;

color: $site-font-color-darker;

}

@media (min-width: $screen-sm-min) {

td:before {

display: none;

}

th, td {

text-align: left;

}

@media (min-width: $screen-sm-min) {

th, td {

display: table-cell;

// padding: .25em .5em;

}

th:first-child, td:first-child {

padding-left: 0;

}

th:last-child, td:last-child {

padding-right: 0;

}

Articles récents

Catégories

Archives

Méta

Étiquette : table

[Magento 2] Changer la valeur de l’attribut Colspan dans les tableaux des commandes du compte client

[Magento 2] Modifier les stocks directement depuis la base de données

Retrouver un produit dans la table `cataloginventory_stock_item`

Quelques notes:

[Magento 2] Eviter la redirection automatique de mon instance locale vers la prod lorsque j’affiche une page dans mon navigateur

Pour le frontoffice

Pour le backoffice

[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

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

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

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

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

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

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

display: table-cell;

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

[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

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

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

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

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

Mixin SASS

Retrouver un produit dans la table cataloginventory_stock_item

Quelques notes:

Pour le frontoffice

Pour le backoffice

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

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

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

table

display: table-cell;

Ressources en ligne :

Deux exemples maison pour un tableau comparatif :

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

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

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

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

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

Mixin SASS

Retrouver un produit dans la table `cataloginventory_stock_item`

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