Bootstrap 4表格：实现单元格内部分文本右上角对齐需求

嘿，这个需求其实很好实现！你只需要把右侧列里要右上对齐的那段文本单独用一个小容器包起来，然后用Bootstrap的内置类或者自定义CSS来控制它的位置就行。下面给你两种可行的方案：

Bootstrap 4本身就提供了现成的对齐工具类，不用额外写CSS就能搞定：

<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-bordered">
  <thead>
    <tr>
      <th>左侧列</th>
      <th>右侧列</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>
        <!-- 保持左对齐的主内容 -->
        这是左对齐的主要文本<br>
        第二行左对齐内容
        <!-- 右上对齐的文本：用float-right让它靠右，mt-0去掉默认顶部边距 -->
        <span class="float-right mt-0">右上角文本</span>
      </td>
    </tr>
    <tr>
      <td>内容2</td>
      <td>
        另一段左对齐内容
        <span class="float-right">另一个右上文本</span>
      </td>
    </tr>
  </tbody>
</table>

这个方法的好处是零自定义代码，完全利用Bootstrap的现有类，兼容性也很好。

如果你需要更精确地控制右上文本的位置，比如调整它和单元格边缘的距离，可以自己写个小CSS类：

<style>
  /* 定义右上对齐的类 */
  .top-right-text {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  /* 给右侧单元格加相对定位，让绝对定位的文本以它为参照 */
  .relative-cell {
    position: relative;
    /* 预留顶部空间，避免主内容和右上文本重叠 */
    padding-top: 30px;
  }
</style>

<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-bordered">
  <thead>
    <tr>
      <th>左侧列</th>
      <th>右侧列</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td class="relative-cell">
        这是左对齐的主要内容<br>
        第二行左对齐文本
        <span class="top-right-text">右上角文本</span>
      </td>
    </tr>
  </tbody>
</table>

这种方式可以通过修改top和right的值，精准调整文本的位置，适合有特殊布局需求的场景。

小提醒 #

• 用浮动方案的时候，如果单元格内容比较复杂，记得可以加个<div class="clearfix"></div>在浮动元素后面，避免布局错乱（不过表格单元格里一般不会有这个问题）。
• 用绝对定位方案时，一定要给单元格加position: relative，不然文本会相对于整个页面定位，就跑错地方啦！

内容的提问来源于stack exchange，提问作者user982124