Question

我有一个响应表，其中结束列显示货币数字。目前它看起来像这样：

但我希望它能做到这一点：

可能没有任何数据，因此£符号将替换为N/A，而<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>也应该被拉到列的右侧。

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

{% for lead in project.leaders %}
    {% if forloop.counter == 1 %}
        {% lead_member = lead.0 %}
     {% else %}
        {% lead_member = ','.lead.0 %}
     {% endif %}
{{ lead_member }}
{% endfor %}

Answer 1

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

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

＆＃13;

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

＆＃13;

Answer 2

<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'><span>Budget:</span> £123,456</div>
            <div class='text-right'><span>Value:</span> £200,000</div>
            <div class='text-right'><span>Spent:</span> N/A</div>
        </td>
    </tr>
</tbody>

和

#mytable tbody tr td .text-right span{
  min-width:200px;
  max-width:300px;
  display: inline-block;
}

Spans需要设置为内联块，否则宽度属性将不会占用，因为它们默认为仅内联元素。

设置最小和最大宽度将强制跨度容器不低于或高于某个点，这意味着即使您的初始文本（即示例）200px标记，您的其他文本也将被强制保留在左侧（如在花费中）仅最终（再次，例如）80px

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

2 个答案: