How to fix table width breaking out from div? - html

Question

Table works normally in 100%, but when I zoom in the table width is not following the screen size. I want to use overflow-scroll to make this work but the scroll bar is not showing.
I don't want to use table-layout fixed with width 100%.
Image below shows the table out of div that makes my upper div (title) going out of div too
HTML
<div id="content">
<div class="breadCrumbs">
<h2 id="breadhead">Report Management</h2>
<div class="clearfix"></div>
</div>
<div class="frameBody p-4 p-md-5 pt-5">
<div class="row">
<div class="col-md-12 tableCover" style="overflow:scroll" >
<table id="tblBranchs" class="table table-bordered " >
<thead>
<tr>
<td >Kode Branch</td>
<td width="5%">Grup</td>
<td >Nama</td>
<td width="20%">Alamat</td>
<td >Bank</td>
<td >Nama Bank</td>
<td >No. Rekening</td>
<td >Kota</td>
<td >Tindakan</td>
</tr>
</thead>
<tbody>
<tr>
<td>12345</td>
<td>12345</td>
<td>12345</td>
<td>123453iuuihefsbefjhsbfjsbfjbsf</td>
<td>12345</td>
<td>12345kl3jhsekfnkljsebf</td>
<td>12345</td>
<td>12345</td>
<td>12345</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
CSS
#content{
width: 100%;
padding: 0;
min-height: 100vh;
transition: all 0.3s;
margin-left: 200px;
}
#breadCrumbs{
padding-top: 4rem;
padding-bottom: 2rem;
padding-left: 3rem;
border-radius: 0px 0px 13px 13px;
box-shadow: 0px 4px #d4d4d6;
}
.table{
width:100%;
}
How to correct this table problem. If i'm using table layout fixed. It shows all table column without scroll but it looks bad
**EDIT
Seems like it's because tableCover width is set 100%. If i set width to (e.g 700px) this is works. But how can make tableCover width following width of the content class width (white screen width) ?
**EDIT 2
The scroll is shown, but why is the table out of div?
This works well if i hide the sidebar, but why it's not responsive when sidebar is active?

Answer 1

Try This
#content
{
width: 100%;
padding: 0;
min-height: 100vh;
transition: all 0.3s;
}
#breadCrumbs
{
padding-top: 4rem;
padding-bottom: 2rem;
padding-left: 3rem;
border-radius: 0px 0px 13px 13px;
box-shadow: 0px 4px #d4d4d6;
}
.table
{
width:100%;
}

Answer 2

Change your CSS code like this:
*,
*:before,
*:after {
box-sizing: border-box;
}
#content{
width: 100%;
padding: 0;
min-height: 100vh;
transition: all 0.3s;
margin-left: 200px;
}
#breadCrumbs{
padding-top: 4rem;
padding-bottom: 2rem;
padding-left: 3rem;
border-radius: 0px 0px 13px 13px;
box-shadow: 0px 4px #d4d4d6;
}
.table {
display: block;
width: 100%;
}