In my current setup, I have the following table:
<table class="table table-sm table-borderless w-auto">
<thead>
<tr>
<th>
<input type="checkbox" value="false" class="form-check-input" />
</th>
<th>#</th>
<th>Customer</th>
<th>Date</th>
<th>Channel</th>
<th>Status</th>
<th class="d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">Payment</th>
<th class="d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" value="false" class="form-check-input" />
</td>
<td>24334</td>
<td>Customer X</td>
<td><time datetime="2022-08-06T10:32">28.08.22 - 10:32</time></td>
<td>POS</td>
<td>Received
</td>
<td class="d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">Cash</td>
<td class="d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-block">4 products = $123.45</td>
</tr>
</tbody>
</table>
Upon checking the above code, I have noticed that I am trying to hide the Payment and Summary columns on smaller screens. However, the behavior is not as expected. When the page loads on a md screen size or above, both columns are visible but they stack on top of each other. This also applies to the contents of the td tags. Refer to the screenshot below for better clarification:
https://i.sstatic.net/ZgI0x.png
The same scenario occurs with span tags as well. I have three buttons with font awesome icons and text next to them. Here is the code snippet:
<button type="button" class="btn">
<i class="fa fa-search"></i> <span>Detailed Search</span>
</button>
Upon execution, the output looks like this:
https://i.sstatic.net/wrBVn.png
Nevertheless, when I add the
d-none d-sm-none d-md-block d-lg-block d-xl-block d-xxl-blockhttps://i.sstatic.net/c4aTn.png
Replacing block with inline resolves the issue with the buttons. But, when applied to the th and td tags, there is a misalignment problem with the elements.
https://i.sstatic.net/cG3RZ.png
https://i.sstatic.net/DV7Rf.png
https://i.sstatic.net/E4CHx.png
I have considered using the hidden property instead of none, but it hasn't changed the behavior. Any assistance in resolving this issue would be highly appreciated.