引导表对齐问题答案

【问题标题】：Bootstrap Table Alignment issue引导表对齐问题
【发布时间】：2016-09-16 13:54:42
【问题描述】：

我正在尝试对齐表格标题并如图所示，但到目前为止我无法达到预期的结果。我想让我的标题向右对齐，其余内容与标题的左侧对齐。有没有办法使用纯CSS和无需手动指定偏移量来做到这一点？

<table class="table">
  <thead>
    <tr class="text-uppercase">
      <th>
        <h4>BlaBla</h4>
      </th>
      <th class="text-right">
        <h4>BlaBlaBlaBlaBlaBlaBlaBla</h4>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td class="text-right">Table cell</td>

    </tr>
    <tr>
      <td>Table cell</td>
      <td class="text-left">Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td><span style="position:relative; color: red; left: 185px;">Desired</span>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

请提供您迄今为止编写的代码，以便我们更好地了解您的方法和您面临的问题。
这是一个包含基本 Bootstrap 表布局的小小提琴：jsfiddle.net/wakyLgzm
如果您可以将代码添加到问题本身，那就太好了，因为问题不应过度依赖外部资源。此外，您当前的方法如何无法实现您想要的？目前还不是很清楚，我看到一些文字是靠右对齐的......（也将其作为更多信息编辑到您的问题中。）
我不想手动指定缩进，因为我正在处理的网站是多语言的，所以标题的宽度可能会有所不同。如果这个问题没有简单的解决方法，那么我想我必须手动指定它:)

标签： html css twitter-bootstrap html-table alignment

【解决方案1】：

如果您想将<span> 的左边缘对齐到其父元素的右侧，但又不想将所需的left 偏移硬编码为像素值，则可以使用百分比值而是。

left 的百分比值将相对于<span> 的容器宽度，这将对应于标头的长度。在这种情况下，您需要left:100%（向左偏移容器宽度的 100%，也就是完全推到容器的右侧）。

无论标题的长度（以及<span> 的容器的宽度）如何，此 CSS 都可以工作，因为它使用相对而不是固定的偏移值：

<table class="table">
  <thead>
    <tr class="text-uppercase">
      <th>
        <h4>BlaBla</h4>
      </th>
      <th class="text-right">
        <h4>BlaBlaBlaBlaBlaBlaBlaBla</h4>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td class="text-right">Table cell</td>

    </tr>
    <tr>
      <td>Table cell</td>
      <td class="text-left">Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td><span style="position:relative; color: red; left: 100%">Desired</span>
      </td>
    </tr>
  </tbody>
</table>

希望这会有所帮助！如果您有任何问题，请告诉我。

【讨论】：