Bootstrap 4表格在表格单元格的右上角对齐一些文本

Question

我有一个简单的 Bootstrap 4 表，有 2 列 - 我希望能够将右上列中的一些文本向右对齐，同时将该单元格中的剩余文本保留为左对齐。

这是我的桌子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td width=20%>SKU:</td>
    <td width=80%>PM432523
      <div class="text-right">On Special</div>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>

我试图让On Special字符串向右对齐并与 SKU 值在同一行 - 我尝试过使用

and and 但似乎无法让它发挥作用。我不确定这是否可能，或者是否有其他方法来解决这个问题？

Answer 1

这很简单；你只需要更换，

<div class="text-right">On Special</div>

和

<div class="float-right">On Special</div>

下面找到完整的工作代码：

<div class="text-right">On Special</div>