Make tables with float:left add horizontal scroll bar instead of "stacking" each other on-CodePudding

I have 3 rather wide tables (each take up around 40% of the screen) and I want them to be side by side. The first two are side by side, but the last one gets below the first one.

How do I get a horizontal scroll-bar and allow the "side-by-side"? I have added float:left to my css

table.info {
    float: left;

}

<body>

<table >
    <tr>

        <td>
            <table>
                <h4 align="center">2020</h4>
                <tr>
                    <th style="max-width:100%">Amount</th>
                    <th style="max-width:100%">Notes</th>
                </tr>
                {% for abon in abonnements %}
                <tr>
                    <td>{{abon.data|dictionary_items:"2020"|dictionary_items:"amount"|default_if_none:""}}</td>
                    <td>{{abon.data|dictionary_items:"2020"|dictionary_items:"notes"|default_if_none:""}}</td>
                </tr>
                {% endfor %}
            </table>
        </td>

    </tr>
</table>


<table >
    <tr>

        <td>
            <table>
                <h4 align="center">2021</h4>
                <tr>
                    <th style="max-width:100%">Amount</th>
                    <th style="max-width:100%">Notes</th>
                </tr>
                {% for abon in abonnements %}
                <tr>
                    <td>{{abon.data|dictionary_items:"2021"|dictionary_items:"amount"|default_if_none:""}}</td>
                    <td>{{abon.data|dictionary_items:"2021"|dictionary_items:"notes"|default_if_none:""}}</td>
                </tr>
                {% endfor %}
            </table>
        </td>

    </tr>
</table>


<\body>

CodePudding user response：

Use Flexbox on the container: display:flex to align them next to each other. Then enable scrolling with overflow-x: scroll. After that you can prevent the default shrinking to fit behavior by applying flex-shrink: 0 to the table.

div {
  display: flex;
  overflow-x: scroll;
}

table {
  flex-shrink: 0;
}


/* for visualization only */
table {
  width: 40%;
  height: 50vh;
  border: 2px solid black;
}

<div>
  <table></table>
  <table></table>
  <table></table>
</div>