Is there a way to expand bootstrap card dynamically? - html

Question

So I have table inside bootstrap card:
<div class="card col-5">
<div class="card-body">
<div class="table-view">
<div class="box table fixed-table-body">
<table id="request_data"
class="dataTable no-footer table table-hover table-border" role="grid" style="overflow: visible;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
</table>
</div>
</div>
The table fits into the card but when the screen is resized the table should fit into the card but it expands out, I tried writing #media QUERIES but nothing is working, if someone could please help out.
Thankyou.

Answer 1

There should be a table-responsive class available in Bootstrap that you can use on a wrapping element around the table.
You could try something like this in your code:
<div class="table-responsive">
<table id="request_data"
class="dataTable no-footer table table-hover table-border" role="grid" style="overflow: visible;">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
</table>
</div>
Here's some more information about it:
https://getbootstrap.com/docs/5.0/content/tables/

Answer 2

You would have to make the tables responsive via viewports, I have added css for your reference. However, the codepen links below have the working code:
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
Some useful resources are as follows:
https://codepen.io/AllThingsSmitty/pen/MyqmdM
https://codepen.io/ismailbaskin/pen/KgAGRr
https://codepen.io/MartijnCuppens/pen/JMyOgv
Ps. Please note that these are for references only and is not my piece of work.