HTML表格数据以相反的顺序水平呈现

Question

我正在创建计算器，并且在按钮布置方面，我使用的是Bootstrap4表。但是该表与我编写的代码相反。该表的列被反转。

<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

这是因为您在HTML文档中的文本方向。

这里是一个链接，您可以在其中监视其工作方式。如果在HTMl中设置它，则每个文本都会受到影响，但是，如果您只希望它的一部分朝那个方向前进，则会有一个css属性。例如，您只需将它们应用于div，它将起作用。

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