css - 在列的每一端对齐文本 - Bootstrap

Question

我有一个响应表，其中最后一列显示金钱数字。目前它看起来像这样:

但我希望它这样做:

可能没有任何数据，因此 £ 符号将替换为 N/A，它也应该被拉到列的右侧。

数据是从 MySQL 中获取的，但这里是我的代码的简化片段:

<table id="mytable" class="table table-bordred table-striped">
<thead>
    <th>Reference</th>
    <th>Client</th>
    <th>Description</th>
    <th>Money</th>
</thead>
<tbody>
        <tr>
            <td>#1234</td>
            <td>Josh Blease</td>
            <td>Needs a new filter fixing</td>
            <td class='money'>
                <div class='text-right'>Budget: £123,456</div>
                <div class='text-right'>Value: £200,000</div>
                <div class='text-right'>Spent: N/A</div>
            </td>
        </tr>
</tbody>

Answer 1

Divs 很有用，但我认为这不是这种情况的最佳解决方案，也许您需要更好地使用表格属性

http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp

<table id="mytable" class="table table-bordred table-striped">
  <thead>
    <th>Reference</th>
    <th>Client</th>
    <th>Description</th>
    <th colspan="2">Money</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan="4">#1234</td>
      <td rowspan="4">Josh Blease</td>
      <td rowspan="4">Needs a new filter fixing</td>
    </tr>
    <tr>
      <td>Budget</td>
      <td>£123,456</td>

    </tr>
    <tr>
      <td>Value</td>
      <td>£200,000</td>
    </tr>
    <tr>
      <td>Spent</td>
      <td>N/A</td>
    </tr>
  </tbody>
</table>