Currently, I am in the process of developing an app using Bootstrap. The main objective of the code snippet below is to establish three rows within a container, with the initial row containing two columns each housing a card. In the first card (top left), my goal is to display two images side by side while maintaining their aspect ratio. On the second column, I aim to include a table. While the current code successfully accomplishes this layout for larger screen sizes, resizing it reveals that the cards do not shrink proportionally, resulting in varying heights. My priority lies in ensuring that the cards scale uniformly, regardless of size changes, so they remain consistent in height. Additionally, I would like the table to implement vertical scrolling once the card's height reaches a specified value. How can I achieve these goals?
table.table>tbody>tr>td {
padding: 0 !important;
margin: 0 !important;
border-collapse: collapse !important;
border: none !important;
border-spacing: 0 !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706d706e733f322e363f6d">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89a97978c8b8c8a9988b8cdd6cbd6c8d59994889099cb">[email protected]</a>/dist/css/bootstrap.min.css" />
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="container-fluid">
<div class="row row-cols-2">
<div class="col-7">
<div class="card">
<div class="card-body">
<table id="stream_table" class="table">
<tbody id="stream_body">
<tr>
<td>
<div class="ratio ratio-16x9">
<img id="stream_id1" src="https://picsum.photos/seed/picsum/1920/1080" title="" data-bind="attr: { title: tt9 }" style="max-width: 100%; height: auto; position:absolute;visibility: visible;object-fit: fill;" alt="">
<img id="stream_idnv1" title="" data-bind="attr: { title: tt10 }" src="../static/img/novideo.png" class="video" style="transform: scale(1.25,1);position: absolute; visibility: hidden; object-fit: fill; top: 0%; width: 100%; height: 100%; opacity: 0.3;"
alt="">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>