[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

@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');

}

});

Articles récents

Catégories

Archives

Méta

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

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