Question

我有一个django应用程序，我想显示模型的对象。因此，我在我的方法中使用了一个包含标记，它返回一个数据表，用于在我的模板中显示结果。因此，在以下自定义包含标记中，

*dir_extras.py*
@register.inclusion_tag('app_name/model_data.html')
def field_data(field):
    data_list = Attributes.objects.values_list(field, flat=True)    
    return {'data_list':data_list}

我正在返回模型类Attributes的字段对象列表。呈现标记的模板如下：

*model_data.html*
{% load dir_extras %}
<table> 
{% for data in data_list %}
    <tr>
        <td> {{data}} </td>
    </tr>
{% endfor %}
</table>

我运行field_data标签并显示所有属性数据的模板如下：

*list.html*
<table>
<tr>
    {% for field in fields %}
        <th>{{ field.verbose_name }}</th>
    {% endfor %}
    </tr>   
    <tr>
        {% for f_name in field_names %}
                <td> {% field_data f_name %} </td>
        {% endfor %}    
    </tr>   
 </table>

尽管所有表列都已对齐，但行的格式仍然不一致。因此，行的元素彼此不对齐，而是第一个元素跨越太多，与其他5行的元素对齐。

list.html template image

格式是否因包含标记而更改，或者是另一个问题，是否有办法解决？

Answer 1

您可以在CSS中使用HTML表格格式。 CSS具有设置哪些列自动扩展的选项。您可以使用百分比或像素定义列宽。

为您的<th>和<td>提供CSS课程：

<table class="my-listing">
<tr>
    {% for field in fields %}
        <th class="column-{{ field.verbose_name|slugify }}">{{ field.verbose_name }}</th>
    {% endfor %}
    </tr>   
    <tr>
        {% for f_name in field_names %}
                <td class="column-{{ f_name|slugify }}"> {% field_data f_name %} </td>
        {% endfor %}    
    </tr>   
 </table>

使用CSS控制列扩展：

 /* Default width of the column */
 .my-listing td,
 .my-listing th {
      width: 10%;
 }

 /* Width of one specific column */
 .column-id {
       width: 10%;
 }

Django documentation how to have static assets like CSS with your app

Styling tables with CSS

使用您的网络浏览器调试工具（如Firebug）来动态修改CSS样式并找到合适的值。

在Django <table> </table>中设置列宽

1 个答案: