JSFiddle: Click Here
In my design, I have a table within a card element. However, when the window size is reduced to mimic a mobile device, the left padding remains intact while the right padding disappears. How can I ensure that the right side padding is maintained within the card for smaller screens?
<div class="row">
<div class="col-lg-8 offset-lg-2 pt-4">
<div id="accordion">
<div class="card mb-4">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button
class="btn btn-link"
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Card
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body table-responsive">
<table class="table table-bordered table-striped table-sm text-center">
<thead>
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
<th>Column Four</th>
<th>Column Five</th>
<th>Column Six</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value One</td>
<td>Value Two</td>
<td>Value Three</td>
<td>Value Four</td>
<td>Value Five</td>
<td>Value Six</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>