在 Django 中为 <table> 设置列宽

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}

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

*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

您可以将 HTML 表格格式与 CSS 结合使用。 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 样式以进行实验并找到好的值。