HTML Table data renders horizontally in reverse order

Question

I am creating a calculator and for the button arrangement, I am using the Bootstrap4 table. But the table is rendered in reverse of the code I have written. The columns of the table are reversed.

<table class="table text-center table-sm table-borderless mt-2">
<tbody>
    <tr>
        <td colspan="2">
            <div class="btn-group btn-group-justified" role="group">
                <button type="button" class="btn btn-grey btn-left">Rad</button>
                <button type="button" class="btn btn-grey">Deg</button>
            </div>
        </td>
        <td><button class="btn btn-grey btn-block ripple border">x!</button></td>
        <td><button class="btn btn-grey btn-block ripple border">(</button></td>
        <td><button class="btn btn-grey btn-block ripple border">)</button></td>
        <td><button class="btn btn-grey btn-block ripple border">%</button></td>
        <td><button class="btn btn-grey btn-block ripple border">AC</button></td>
    </tr>
    <tr>
        <td><button class="btn btn-grey btn-block ripple border">inv</button></td>
        <td><button class="btn btn-grey btn-block ripple border">sin</button></td>
        <td><button class="btn btn-grey btn-block ripple border">ln</button></td>
        <td><button class="btn btn-light btn-block ripple border">7</button></td>
        <td><button class="btn btn-light btn-block ripple border">8</button></td>
        <td><button class="btn btn-light btn-block ripple border">9</button></td>
        <td><button class="btn btn-grey btn-block ripple border">÷</button></td>
    </tr>
    <tr>
        <td><button class="btn btn-grey btn-block ripple border">π</button></td>
        <td><button class="btn btn-grey btn-block ripple border">cos</button></td>
        <td><button class="btn btn-grey btn-block ripple border">log</button></td>
        <td><button class="btn btn-light btn-block ripple border">4</button></td>
        <td><button class="btn btn-light btn-block ripple border">5</button></td>
        <td><button class="btn btn-light btn-block ripple border">6</button></td>
        <td><button class="btn btn-grey btn-block ripple border">x</button></td>
    </tr>
    <tr>
        <td><button class="btn btn-grey btn-block ripple border">Ɛ</button></td>
        <td><button class="btn btn-grey btn-block ripple border">tan</button></td>
        <td><button class="btn btn-grey btn-block ripple border">√</button></td>
        <td><button class="btn btn-light btn-block ripple border">1</button></td>
        <td><button class="btn btn-light btn-block ripple border">2</button></td>
        <td><button class="btn btn-light btn-block ripple border">3</button></td>
        <td><button class="btn btn-grey btn-block ripple border">−</button></td>
    </tr>
    <tr>
        <td><button class="btn btn-grey btn-block ripple border">Ans</button></td>
        <td><button class="btn btn-grey btn-block ripple border">EXP</button></td>
        <td><button class="btn btn-grey btn-block ripple border">X<sup>y</sup></button></td>
        <td><button class="btn btn-light btn-block ripple border">0</button></td>
        <td><button class="btn btn-light btn-block ripple border">.</button></td>
        <td><button class="btn btn-primary btn-block ripple border"><b>=</b></button></td>
        <td><button class="btn btn-grey btn-block ripple border">+</button></td>
    </tr>
</tbody>
</table>

https://codepen.io/sivaramakrishnan/pen/RwwzWQa

Answer 1

It is because of your text direction in your HTML document.

Here is a link, where you can get an oversight about how it works. If you set it in HTMl, every text will be affected, however, there is a css property in order if you only want parts of it will go that direction. You simply just apply them to a div for example and it will work.

https://www.w3schools.com/cssref/pr_text_direction.asp