Responzivní MEGAtabulka v25

inpirováno GreedyNav

by Petr Haluza

HTML

<div class="table-container">
  
  <table class="demo-table">
<thead>
  <tr class="visible">
      <th>Product ID</th>
      <th>Name</th>
      <th>Quality</th>
      <th>Quantity</th>
			<th>Quantity</th>
			<th>Quantity</th>
			<th>Quantity</th>
			<th class="visibleAlways">Sum</th>
  </tr>
		<tr class="hidden"></tr>
    </thead>
    <tbody>  
  <tr class="visible">
      <td>1</td>
      <td>Product 1</td>
      <td>Good Quality</td>
      <td>500 Items</td>
			<td>400 Items</td>
			<td>300 Items</td>
			<td>200 Items</td>
			<td class="visibleAlways">456</td>
  </tr>
	<tr class="hidden"></tr>
  <tr class="visible">
      <td>2</td>
      <td>Product 2</td>
      <td>Good Quality</td>
      <td>500 Items</td>
			<td>400 Items</td>
			<td>300 Items</td>
			<td>200 Items</td>
			<td class="visibleAlways">789</td>
  </tr>
<tr class="hidden"></tr>
  </tbody>
</table>

</div>

CSS

.table-container {
    max-width: 100%;
    overflow-x: auto;
    margin: 2em 0;
    background: #f6f8fa;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(60,60,60,0.06);
    padding: 1em;
}

.demo-table {
    width: 100%; max-width: 800px;
    min-width: 400px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: white;
    border-radius: 6px;
    overflow: hidden;
}

.demo-table th, .demo-table td {
    padding: 0.7em 1em;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}

.demo-table thead {
    background: #eaf3fa;
}

.demo-table tr.visible {
    transition: background 0.3s;
}

.demo-table tr.visible:hover {
    background: #f4f9ff;
}

.demo-table th.visibleAlways, .demo-table td.visibleAlways {
    background: #def0e7;
    font-weight: bold;
    color: #026755;
    border-left: 3px solid #22947b;
}

.demo-table tr.hidden {
    display: none;
    background: #fdf6e3;
    font-size: 0.96em;
}

.demo-table tr.hidden.shown {
    display: table-row;
    animation: fadeIn 0.25s;
}

@keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

.demo-table tr.hidden td, 
.demo-table tr.hidden th {
    font-style: italic;
    color: #ad7600;
    border: 1px dashed #ebc99f;
}

.toggle-hidden {
    float: right;
    cursor: pointer;
    padding: 0.2em 0.6em;
    margin-left: 0.5em;
    background: #ffe6aa;
    color: #b28a03;
    border-radius: 1em;
    border: 1px solid #eed090;
    font-size: 0.88em;
    transition: background 0.2s;
}
.toggle-hidden:hover {
    background: #ffcc55;
}

@media (max-width: 900px) {
    .demo-table {
        font-size: 0.98em;
    }
    .demo-table th, .demo-table td {
        padding: 0.6em 0.7em;
    }
    .table-container {
        padding: 0.3em;
        box-shadow: 0 0 6px rgba(60,60,60,0.06);
    }
}

@media (max-width: 667px)...

JavaScript

function adjustDemoTables() {
  $('.table-container').each(function() {
    var $container = $(this);
    var $table = $container.find('.demo-table');
    var availableWidth = $container.width();

    var $headerRow = $table.find('thead tr.visible');
    var $headerCells = $headerRow.children();
    var alwaysVisibleIndices = [];
    $headerCells.each(function(idx) {
      if ($(this).hasClass('visibleAlways')) alwaysVisibleIndices.push(idx);
    });

    // Výpočet overflow sloupců
    var usedWidth = 0;
    var overflowIndices = [];
    var alwaysTotal = 0;
    $headerCells.filter('.visibleAlways').each(function() {
      alwaysTotal += $(this).outerWidth(true);
    });
    $headerCells.each(function(idx) {
      if (alwaysVisibleIndices.indexOf(idx) !== -1) return;
      var w = $(this).outerWidth(true);
      if ((usedWidth + w + alwaysTotal) > availableWidth) {
        overflowIndices.push(idx);
      } else {
        usedWidth += w;
      }
    });

    // Reset
    $table.find('th, td').show();
    $table.find('tr.hidden').empty().removeClass('shown');
    $table.find('.toggle-hidden').remove();

    // SKRÝVÁNÍ V HLAVIČCE
    $headerRow.children().each(function(idx) {
      if (overflowIndices.indexOf(idx) !== -1 && alwaysVisibleIndices.indexOf(idx) === -1) {
        $(this).hide();
      }
    });

    // Jeden td s divy v .hidden řádku v thead
    var $headerHiddenRow = $headerRow.next('.hidden');
    $headerHiddenRow.empty();
    var headerDivs = [];
    $headerCells.each(function(idx) {
      if (overflowIndices.indexOf(idx) !== -1 && alwaysVisibleIndices.indexOf(idx) === -1) {
        var $cell = $(this).clone().show();
        var headerText = $cell.text();
        headerDivs.push('<div data-original-header="' + headerText + '">' + headerText + '</div>');
      }
    });
    if (headerDivs.length) {
      $headerHiddenRow.append('<th colspan="'+$headerCells.length+'"><div...