HTML Table data renders horizontally in reverse order

Sivaramakrishnan

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

Patrik Alexits

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

enter image description here

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Get data horizontally into html table

Html Table : td data to be center. vertically and horizontally

React Table renders data undefined

Reverse the data order

How to display json data in reverse order in vue js html?

Sorting HTML table with JSON data in alphabetical order

Html Table Data Not populating in correct order

HTML Table structure not displaying data in right order

Horizontally order the <th> tag of a table with NodeJs and Handlebars

Reverse the order of a data frame columns

Mat-table renders rows but not data

Reverse order in HTML div element

How to make this query get some data from another table in reverse order

Join a table to itself in reverse order in mysql

Display data in a table by grouping them horizontally

Loading data from MySQL to table horizontally

SQL table data horizontally using PIVOT

Listing data horizontally(in a table) instead of vertically

PHP Table Data Show Results Vertically not Horizontally

Dynamically created html table data not showing in order as expected

Printing small groups of data in queue in reverse order

Reverse the order of some data frame columns

How to reverse a contingency table to get the data in R

html - php echo row repeatedly (table reverse)

Reverse row "order" value from table MySQL with PHP

AngularJS: orderBy filter to reverse the order of the table rows does not work

SAS - Reverse order of values of a Variable based on another Variable value in a Table

How to find pairs that don't have a reverse order pair in a table?

SQL Server : join table to itself to show data horizontally