Question

我正在尝试为表格创建标题，并且文本与正文中的那些条目不匹配。即使当我做单个字符时。这里似乎是什么问题？我已经在下面提供了表格代码以及表格的显示方式。

        <table style="width:100%">
          <col align="left">
          <col align="left">
          <col align="left">
            <col align="left">
            <!-- HEADERS -->
            <thead>
                <tr>
                    <th scope="col">SYMBOL</th>
                    <th scope="col">PRICE</th>
                    <th scope="col">$ CHANGE</th>
                    <th scope="col">% CHANGE</th>
                </tr>
            </thead>
            <tbody>
          {% for item in view.display_stocks %}
          <tr class="table table-striped">
            <th scope   ="row"><a href="search/stock_symbol={{ item.stock_symbol }}"><font color="#2C3E50">{{ item.stock_symbol }}</font></a></th>
            {% if item.percent_change < 0 %}
                <th><font color="red">${{ item.price }}</font><th>
                <th><font color="red">{{ item.dollar_change }}</font><th>
                <th><font color="red">{{ item.percent_change }}%</font><th>
            {% else %}
                <th><font color="green">${{ item.price }}</font><th>
                <th><font color="green">+{{ item.dollar_change }}</font><th>
                <th><font color="green">+{{ item.percent_change }}%</font><th>
            {% endif %}
            </tr>
            {% endfor %}
            </tbody>
        </table>

编辑：似乎没有答案可以解决问题，但我只是尝试在其中添加更多列，并且体内似乎有另外两列从此处进入，这是一张图片当我为标题添加两个额外的列时：

Answer 1

当然，这与您放在col上的align =“ left”有关，请将其删除，就可以了。

Answer 2

您应该在表主体内使用<td>而不是<th>。另外，您在主体<tr class="table table-striped">中拥有这些类，而您不在头脑中。

Answer 3

好吧，您可能应该正确地将其固定在体内，这可能会解决问题：

{% if item.percent_change < 0 %}
  <th><font color="red">${{ item.price }}</font></th>
  <th><font color="red">{{ item.dollar_change }}</font></th>
  <th><font color="red">{{ item.percent_change }}%</font></th>
{% else %}
  <th><font color="green">${{ item.price }}</font></th>
  <th><font color="green">+{{ item.dollar_change }}</font></th>
  <th><font color="green">+{{ item.percent_change }}%</font></th>
{% endif %}

您拥有的主体代码将自动关闭th，然后创建第二个代码，这就是您的列不正确的原因。

话虽如此，但我同意其他评论者的意见，通常来说，对于主体单元，应使用 td 而不是 th 并使用CSS来设置内容样式喜欢它。

表格标题与表格主体不对齐

3 个答案: