Having trouble getting the table and side menu to behave properly within bootstrap columns, as shown in the image. I've tried various solutions with no success. The goal is to have a responsive table that fills 7 columns and a side menu that fills 3 columns. Any insights on why the table is impacting other content layout would be appreciated.
Your assistance is greatly appreciated!
.vertical-menu {
font-family: 'Roboto';
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
#coin{
text-align: center;
background-color: #343434;
color: #FFF;
padding: 10px;
margin: 0;
border-top-right-radius: 12px;
font-family: 'Roboto';
}
.main {
display:inline-block;
height: auto;
}
.content {
}
.table {
width: 800px;
}
.main h3 {
margin-left: 390px;
font-family: 'Roboto';
margin-top: 40px;
}<div class="main">
<div class="row">
<div class="col-md-3">
<div class="vertical-menu" >
<h5 id="coin">Coins</h5>
<a href="#" class="active">BTC</a>
<a href="#">BitC</a>
<a href="#">Eth</a>
<a href="#">LightC</a>
<a href="#">iota</a>
<a href="#">ripple</a>
<a href="#">Verge</a>
<a href="#">Cardano</a>
<a href="#">NEM</a>
<a href="#">TRON</a>
<a href="#">Dash</a>
<a href="#">EOS</a>
<a href="#">NEO</a>
<a href="#">Monero</a>
<a href="#">Qtum</a>
</div>
</div>
<div class="col-md-9">
<h3>Bitcoin</h3>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>