HTML Table 数据以相反顺序水平呈现

Question

我正在创建一个计算器，对于按钮排列，我使用的是 Bootstrap4 table。但是 table 的呈现方式与我编写的代码相反。 table 的列颠倒了。

<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 文档中的文字方向。

这是一个 link，您可以从中了解它的工作原理。如果你在HTMl中设置它，每个文本都会受到影响，但是，如果你只想要部分内容，那么有一个css 属性顺序它会朝那个方向发展。例如，您只需将它们应用于 div，它就会起作用。

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

HTML Table 数据以相反顺序水平呈现

HTML Table data renders horizontally in reverse order

html

css

html-table

bootstrap-4

bootstrap-table