在 django 管理面板中更改列宽答案

【问题标题】：Change the column width in the django admin panel在 django 管理面板中更改列宽
【发布时间】：2025-10-13 14:30:02
【问题描述】：

我的 admin.py 看起来像这样：

class ChangeAdmin(GuardedModelAdmin):
    form = ChangeForm
    search_fields = ('RFC', 'Ticket_Number', 'User_Email', 'Change_Details')
    list_display = ('RFC', 'Ticket_Number', 'User_Requested_Time', 'Start_Time', 'End_Time',
                    'User_Email', 'Line_of_Business', 'Conf_Call_Details', 'Region',
                    'Summary', 'Description', 'Change_Details', 'Site_code', 'Configuration_Item',
                    'Plan_Owner', 'Plan_status', 'Change_Owner', 'Implementer', 'Validator')
    date_hierarchy = 'Start_Time'
    list_select_related = True

很明显，表格显示中有很多列表字段。这搞砸了数据在列中的显示方式。见截图

如何在 django admin 中调整列宽？

【问题讨论】：

我认为你必须覆盖 django 模板使用链接link

标签： python django django-admin django-views

【解决方案1】：

我认为你应该试试这个one 或这个one。第二个链接对我很有用。

顺便说一句：（这应该是一个评论，但我不是 50 代表）你是如何获得这种外观的？我使用 grappelli，但与您的主题相比，它看起来真的很愚蠢。我的用户不断抱怨我的应用程序缺乏图形设计...

【讨论】：

@sDoky..thanks..正是我想要的...有很多开源项目试图改善 django 管理员的外观和感觉。图片中的一个是django-suit...但是我已经切换到一个更重要的项目，称为xadmin..请检查它们..也尝试拖钓 github..会使用引导程序和其他框架对 django admin 进行大量自定义..跨度>
第二个链接只显示了如何在表单文本字段上设置宽度。 OP 正在询问更改列表页面上的列宽，该页面没有任何文本字段...

【解决方案2】：

我在 django-suit 中使用了这种方法：

admin.py

class GuardedAdmin(admin.ModelAdmin):
    class Media:
        js = ('js/guarded_admin.js',)

js/guarded_admin.js

$(function(){
  $(".guarded-column.column-guarded").attr("width", "100px;");
})

你只需要弄清楚你的情况下的列名是什么，并在上面的代码中改变它。

更新

我最近尝试过这个并且它有效（假设您的专栏称为报告）：

$('.reports-column').find('span').attr('style', 'width:150px;')

【讨论】：

尝试两件事。首先在浏览器中测试您的 jquery 选择器以确保其正常工作。如果它在浏览器开发工具中运行良好，则尝试将命令延迟（诊断），如下所示： setTimeout(function() { $(".guarded-column.column-guarded").attr("width" , "100px;"); }, 1000);
每个单元格的内容对我来说都是小表格，所以我在里面设置了这个表格的宽度。这样grapelli尊重内容的宽度和为我解决的问题

【解决方案3】：

admin.py:

class MyClassAdmin(admin.ModelAdmin):

    class Media:
        css = {
            'all': ('fancy.css')
        }

fancy.css：

.column-foo {
    width: 20px;
}

其中“foo”是一个字段名。

来源： https://docs.djangoproject.com/en/3.0/topics/forms/media/

【讨论】：

【解决方案4】：

以前的答案对我不起作用，也许它们已经过时了。我在列标题中添加了填充以使它们更宽。

在您的静态文件夹中创建自定义 css 文件并覆盖“change_list.html”文件

change_list.html（位于 /templates/admin/change_list.html）

{% extends "admin/change_list.html" %}
{% load static %}
{% block extrahead %}
    <!-- Custom -->
    <link rel="stylesheet" href="{% static 'css/custom_changelists.css' %}">
{% endblock %}

custom_changelists.css

.column-FIELD_NAME{
    padding-right: 150px !important;
}

【讨论】：

欢迎来到 Stack Overflow。通过添加程序版本，您可以提高答案的质量

【解决方案5】：

在 Django 3.2 上测试，使用 min-width 而不是 width。

class MyClassAdmin(admin.ModelAdmin):

    class Media:
        css = {
            'all': ('css/fancy.css')
        }

.column-foo {
    min-width: 20px;
}

【讨论】：