Div wont expand with content

[danny971]

I have an issue my div won't expand with the content being loaded to it. I used this same concept in other parts of the application it works but not for my multi-step form

here is the code giving me issues

<h4>Order Section</h4>
<section>

<div class="container-fluid">


<div class="card">

<div class="card-header">
<h4 class="card-title">Order Section</h4>
</div>

<div class="card-body">

<div class="table-responsive">

<!-- Table starts here -->
<table id="table" class="table student-data-table m-t-20" >
<thead>
<tr>
<th scope="col">CATEGORY</th>
<th scope="col">ITEM NAME</th>
<th scope="col">REEV</th>
</tr>
</thead>
<tbody>
@foreach($FID as $data)
<tr>
<td>{{ $data->category_name }}</td>
<td>{{ $data->product_name }}</td>
<td>
<input type="number" name="" id="" min="0" class="form-control">
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th>CATEGORY</th>
<th>Item Name</th>
<th>Reev</th>
</tr>
</tfoot>
</table>
<!-- Table ends here -->

</div>
</div>


</div>


</div>

</section>


here is the css


.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
background-color:red;

-webkit-overflow-scrolling: touch; }
.table-responsive > .table-bordered {
border: 0; }
.frm-container {

overflow-y: auto;

}

its not even showing the footer of the table

 

[cittybb24356]

div tags are just used to define a section or section of an html document. You'll have to add your own border layouts to each section of the document then you can get what you specifically want on how a document should look.
l
Is the CSS fitted to the html document? By that I mean the class files in the database, is it tailored to the correct page size? Whatever that was. For example, png files.