Table in bootstrap modal does not fit and not display overflow

Question

I have a modal with two columns in it. One of the column contains a table. However, the table does not fit into the column and need to scroll horizontally, but I need to make the table fit into the column. Also, I have problem with the scrolling issues. Table should be can scroll if the items is more than the size of the modal.

Here, the link of example:- https://jsfiddle.net/35wzenqf/2/

Please change the view to tabs(row) easier for you to see the columns in modal :)

<div class="btn-group d-flex">
   <button class="btn btn-lg btn-icon btn-primary w-100" data-toggle="modal" data-target="#modal-default">
      <span class="btn-inner--icon"><i class="far fa-money-bill-alt"></i></span>
      <span class="btn-inner--text">Pay</span>
   </button>
</div>

Thank you for anyone helping!

Answer 1

Thanks Ferikeem and Hamid for helping!

These are the answers for my questions:-

Change modal-lg to modal-xl, in my code it doesn't works I don't know why so I added style="max-width: 1140px" for my modal-dialog class. It's the same size as modal-xl in bootstrap.

For the scrolling, I need to set the height.

.horizontal-scroll
{
    overflow-y: auto;
    height: 70vh;
}