Summarize columns when Footable is in small devices - html

Question

I have a table and I want to summarize some of the values in the columns when I show that table in small devices.
Lets suppose I have this table (Big Devices)
Process Good Bad Rework Total
P1 10 5 2 17
P2 5 3 2 10
Total 5 8 4 17
When I show this table in Small Devices I would like to show this
Process Good Other Total
P1 10 7 17 +
P2 5 5 10 +
Total 5 12 17 +
But I don't want to show the "Other" column in big devices (and I don't want to show the + symbol either). I want that column totally hidden.
I can't find how to achieve that. Any help will be really appreciated.

Answer 1

You can use CSS Media Queries.
Have a look at the snippet below (Use full-screen mode for desktop - to show bad & rework cells):
th, td {
padding: 5px 20px;
}
.visible-mob {
display: none;
background: #FF0;
}
.hidden-mob {
display: table-cell;
background: #38E8F1;
}
/* When Screen Width is >= 767px ( ~ Mobile Devices) */
#media screen and (max-width: 767px) {
.visible-mob {
display: table-cell;
}
.hidden-mob {
display: none;
}
}
<table>
<thead>
<tr>
<th>Process</th>
<th>Good</th>
<th class="hidden-mob">Bad</th>
<th class="hidden-mob">Rework</th>
<th class="visible-mob">Other</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>P1</td>
<td>10</td>
<td class="hidden-mob">5</td>
<td class="hidden-mob">2</td>
<td class="visible-mob">7</td>
<td>17</td>
</tr>
<tr>
<td>P2</td>
<td>5</td>
<td class="hidden-mob">3</td>
<td class="hidden-mob">2</td>
<td class="visible-mob">5</td>
<td>10</td>
</tr>
<tr>
<td>Total</td>
<td>5</td>
<td class="hidden-mob">8</td>
<td class="hidden-mob">4</td>
<td class="visible-mob">12</td>
<td>17</td>
</tr>
</tbody>
</table>
Hope this helps!

Answer 2

This is a ugly hack I applied to achieve temporarily what I want to do. If someone finds a better way please let me know.
HTML
<table class="table">
<thead>
<tr>
<th>Process</th>
<th>Good</th>
<th data-breakpoints="xs">Bad</th>
<th data-breakpoints="xs">Rework</th>
<th class="visible-column visible-column-sm" data-classes="visible-column visible-column-sm" data-visible="false">Other</th>
<th>Total</th>
</thead>
<tbody>
<tr>
<td>P1</td>
<td>10</td>
<td>5</td>
<td>2</td>
<td>7</td>
<td>17</td>
</tr>
<tr>
<td>P2</td>
<td>5</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>Total</td>
<td>5</td>
<td>8</td>
<td>4</td>
<td>12</td>
<td>17</td>
</tr>
</tbody>
</table>
CSS
.visible-column {
display: none !important;
}
#media screen and (max-width: 767px) {
.visible-column-sm {
display: table-cell !important;
}
}
At the end of the HTML
<script>
$(document).ready(function () {
$('.table').footable();
});
</script>
Here is the Fiddle
https://jsfiddle.net/oL7m7uqq/