table-rsp.js

by Sparrow Squire

HTML

<table class="priceTable">
    <thead>
        <tr>
            <th>Mon</th>
            <th>Tues</th>
            <th>Weds</th>
            <th>Thurs</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1XXX</td>
            <td>2XXX</td>
            <td>3XXX</td>
            <td>4XXX</td>
            <td>5XXX</td>
            <td>6XXX</td>
            <td>7XXX</td>
        </tr>
        <tr>
            <td>1XXX</td>
            <td>2XXX</td>
            <td>3XXX</td>
            <td>4XXX</td>
            <td>5XXX</td>
            <td>6XXX</td>
            <td>7XXX</td>
        </tr>
        <tr>
            <td>1XXX</td>
            <td>2XXX</td>
            <td>3XXX</td>
            <td>4XXX</td>
            <td>5XXX</td>
            <td>6XXX</td>
            <td>7XXX</td>
        </tr>
        <tr>
            <td>1XXX</td>
            <td>2XXX</td>
            <td>3XXX</td>
            <td>4XXX</td>
            <td>5XXX</td>
            <td>6XXX</td>
            <td>7XXX</td>
        </tr>
        
    </tbody>
</table>

CSS

.priceTable {
  display: block;
  width: 100%;
}

.priceTable thead, .priceTable tbody, .priceTable thead tr, .priceTable th {
  display: block;
}

.priceTable thead {
  float: left;
}

.priceTable tbody {
  width: auto;
  position: relative;
  overflow-x: auto;
}

.priceTable td, .priceTable th {
  padding: 10px;
  border: 1px solid red;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.priceTable th {
  text-align: left;
  background: teal;
}

.priceTable tbody tr {
  display: table-cell;
}

.priceTable tbody td {
  display: block;
}
  

@media screen and (min-width: 480px) {
.priceTable {
    display: table;
  }
  
  .priceTable thead {
    display: table-header-group;
    float: none;
  }
  
  .priceTable tbody {
    display: table-row-group;
  }
  
  .priceTable thead tr, .priceTable tbody tr {
    display: table-row;
  }
  
  .priceTable th, .priceTable tbody td {
    display: table-cell;
  }
  
  .priceTable td, .priceTable th {
    width: auto;
  }

  
}

JavaScript

var smallBreak = 480;
var columns = $('.priceTable tr').length;
var rows = $('.priceTable th').length;

$(document).ready(shapeTable());

$(window).resize(function() {
    shapeTable();
});

function shapeTable() {
    if ($(window).width() < smallBreak) {
        for (i=0;i < rows; i++) {
            var maxHeight = $('.priceTable th:nth-child(' + i + ')').outerHeight();
            for (j=0; j < columns; j++) {
                if ($('.priceTable tr:nth-child(' + j + ') td:nth-child(' + i + ')').outerHeight() > maxHeight) {
                    maxHeight = $('.priceTable tr:nth-child(' + j + ') td:nth-child(' + i + ')').outerHeight();
                }
                if ($('.priceTable tr:nth-child(' + j + ') td:nth-child(' + i + ')').prop('scrollHeight') > $('.priceTable tr:nth-child(' + j + ') td:nth-child(' + i + ')').outerHeight()) {
                    maxHeight = $('.priceTable tr:nth-child(' + j + ') td:nth-child(' + i + ')').prop('scrollHeight');
                }
            }
            for (j=0; j < columns; j++) {
                $('.priceTable tr:nth-child(' + j + ') td:nth-child(' + i + ')').css('height',maxHeight);
                $('.priceTable th:nth-child(' + i + ')').css('height',maxHeight);
            }
        }
    } else {
        $('.priceTable td, .priceTable th').removeAttr('style');
    }
}