Question

我正在尝试对齐我的表格标题，如图所示，但到目前为止，我无法达到预期的结果。我希望我的标题与右侧对齐，其余内容与标题的左侧对齐。有没有办法使用纯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>

Answer 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>

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

Bootstrap表对齐问题

1 个答案: