How can I set colspan depending on hidden-xs a column using Bootstrap? - html-table

Question

I have a table with a dynamic row which I hide one of its columns using bootstrap hidden-xs. The next row which is footer is using colspan.
I wonder if it's possible to set the number of colspan depending on `screen-size (hidden-xs).
<table class="table table-bordered">
{% for product in products %}
<tr>
<td class="text-left hidden-xs">{{ product.name }}</td>
<td class="text-left">{{ product.model }}</td>
<td>{% for option in product.option %}
{% if option.type != 'file' %}
<div><small><span class="hidden-xs">{{ option.name }}: </span>{{ option.value }}</small></div>
{% else %}
<div><small><span class="hidden-xs">{{ option.name }}: </span>{{ option.value }}</small></div>
{% endif %}
{% endfor %}</td>
<td class="text-right">{{ product.quantity }}</td>
<td class="text-right">{{ product.price }}</td>
<td class="text-right">{{ product.total }}</td>
</tr>
{% endfor %}
{% for total in totals %}
<tr>
<td colspan="5" class="text-right">{{ total.title }}</td>
<td class="text-right">{{ total.text }}</td>
</tr>
{% endfor %}
<tbody>
UPDATE
For now such an approach came to my mind:
<tr class="hidden-xs">
<td colspan="5" class="text-right">{{ total.title }}</td>
<td class="text-right">{{ total.text }}</td>
</tr>
<tr class="hidden-xl hidden-lg hidden-sm">
<td colspan="4" class="text-right">{{ total.title }}</td>
<td class="text-right">{{ total.text }}</td>
</tr>
Is there any better solution?

Answer 1

First of all, Bootstrap 4 doesn't have a hidden-xs class. In fact, it doesn't have any type of hidden-* utility. Unless you defined such utilities yourself, you should probably use d-none d-sm-table-cell classes instead of hidden-xs.
Documented here
To your question, you can't set colspan responsively on a <td> using CSS.
The proper way to do it is to use JavaScript, along these lines:
const isXs = window.matchMedia('(max-width: 576px)')
const changeColspans = () =>
[...document.querySelectorAll('.variable-colspan')].forEach((cell) => {
cell.setAttribute('colspan', isXs.matches ? 2 : 4)
})
changeColspans()
window.addEventListener('resize', changeColspans)
where 2 and 4 are the colspan values you want to set to colspan when isXs.matches is true/false. You'll need to add variable-colspan class to each cell you want to change.
If you really want to stay away from a JS solution, for whatever reason, you could work around it, by creating a separate <td> for each case and using Bootstrap's display utilities (linked above) to display the appropriate one on the current responsiveness interval. Generic example:
<td coslapn="2" class="d-sm-none">I render on xs only</td>
<td colspan="4" class="d-none d-sm-table-cell">I render on sm and above</td>
The advantage of using JS here is that you don't need to swap DOM elements which has the potential to lose events bound on the element or generate rendering performance issues, on larger tables. These issues can be addressed, of course, but it's better not to have them in the first place.
JS can also easily handle multiple cases, whereas with the CSS workaround you need a separate element for each case.