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

Question

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

这是我的表格:

<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 值在同一行 - 我试过使用

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

Answer 1

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

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

与

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

在下面找到完整的工作代码:

<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
      <span class="float-right">On Special</span>
    </td>
  </tr>
  <tr>
    <td>Supplier:</td>
    <td>Acme Meat Inc</td>
  </tr>
</table>