Scrollable Table

by ostap_dev

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<section class="mt-5">
        <div class="container">
            <div class="scroll-wrapper overflow-auto" style="padding:100px 0">
                <!-- Start Row -->
                <div style="width: 2000px;" class="d-flex flex-row flex-nowrap">
                    <div class="card shadow-sm position-sticky d-flex flex-row justify-content-between p-2 mx-1" style="height: 55px; width: 280px; z-index: 2; left: 0;">
                        <h5 class="mb-0">Card title</h5>
                        <div class="dropdown ">
                            <button class="btn btn-secondary dropdown-toggle" data-display="static" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                            </button>
                            <div class="dropdown-menu bg-info" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </div>
                    <div class="card shadow-sm d-flex flex-row justify-content-between p-2 mx-1" style="height: 55px; width: 120px; z-index: 1">
                        <h5>$1000</h5>
                    </div>
                    <div class="card shadow-sm d-flex flex-row justify-content-between p-2 mx-1" style="height: 55px; width: 120px; z-index: 1">
               ...