I have to create a web page that contains some simple tables and there can be 4 scenarios (sorry for the bad images):

1. FIRST
2. SECOND
3. THIRD
4. FOURTH

I have already set up the layout with bootstrap and jquery based on the dataset that I get. Here is an example of a table with dataset.

<div class="col-md-12">
<h1>Italia</h1>
<table class="table table-hover table-responsive table-sm table-dark">
    <thead>
        <tr>
            <th class="fit">Pal/Avv</th>
            <th class="fit">Data</th>
            <th class="fit">Lega</th>
            <th class="fit">Match</th>
            <th class="fit">OVER 1,5</th>
            <th class="fit">Vincita 5€</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table></div>

I also did the "fit" part both in height (number of rows that a table can have)

// 70 is max height of td in px (?) | 200 is padding + h1 (?)
    var maxRows = parseInt(Math.floor(($("#tables").height() - 200) / 70) / 2); 
    if(country == "Europe") maxRows = (maxRows * 2) + 1; //full height table

and in width (of the columns of the table)

        .table td.fit,
        .table th.fit {
            white-space: pre-line;
            width: 20%;
            font-size: auto;
        }

        /* full screen with padding*/
        body {
            padding: 1.5%;
            overflow: hidden;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: green
        }

As you can see in addition to the unknowns that I can't find for the number of rows (in the js comment with (?)), in the display of a single table the font size remains small and there is a lot of space between the columns and I would like to improve it example.

I hope you can help me. Thanks in advance!!