Datatables：标题中字体可怕图标显示在新行上的问题

我正在为网站上的用户详细信息创建一个管理员视图。从这个视图中，我希望管理员能够编辑某些表中的某些列，但不是所有列。为了指示哪些列是可编辑的，我使用了一个字体图标来显示该列是可编辑的。JS将被应用，然后允许管理员进行任何编辑。然而，我被格式设置所困扰，根本无法按预期工作。它在新行上不断显示图标，创建丑陋的表格，如下所示：

HTML
我已经尝试了几种加载表格的方法，以便能够正确地呈现表格，但我尝试过的方法都不起作用。HTML通过一个从AJAX调用接收的小树枝加载：

<table class="user-members-data">
    <thead>
        <tr>
            {% for key in user_details|keys %}
                <th>{{ key }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        <tr>
            {% for value in user_details %}
                <td>{{ value }}</td>
            {% endfor %}
        </tr>
    </tbody>
</table>

通过HTML加载图标
或者，我调整了细枝以包含编辑图标，并加载Datatable，而无需jQuery添加图标：

{% for key in user_details.table|keys %}
    <th>
        {{ key }}
        {% if key in user_details.editable_columns %}
            <i class="fas fa-pencil-alt" edit="{{ key }}"></i>
        {% endif %}
    </th>
{% endfor %}

{%用于用户_详细信息中的键。表|键%}
{{key}}
{%if在用户_details.editable_columns%}
{%endif%}
{%endfor%}

这导致了与新生产线完全相同的问题

列。调整（）
在其他地方，我看到了在绘制数据表之后使用此方法来解决任何宽度问题的建议。这对我也不起作用

---

在设置列的宽度时，感觉Datatable根本看不到图标？

感谢andrewjames在评论中指出了方向

解决方案是用

display:block和
空白：无换行作为样式添加

$( 'table.user-members-data thead th' ).each( function(){
    var header = $( this ).html()

    if( jQuery.inArray( header, response.jquery_data.editable_columns ) !== -1 ){
        $( this ).html( '<span style="display:block; white-space:nowrap;">' + header + ' <i class="fas fa-pencil-alt" edit="' + header + '"></i></span>' )
    }
})

$（'table.user-members-data thead th'）。每个（函数（）{
var header=$（this.html（））
if（jQuery.inArray（标题、response.jQuery\u data.editable\u列）！=-1）{
$（this.html（“”+头+“”）
}
})
您是否尝试过将
与
显示：块一起使用？例如，请参见。或者为了更好的控制，在每个单元格中尝试一次？@andrewjames非常感谢你！这是一种享受。使用display:block设置跨距内的标题；和空白：nowrap；他完美地解决了这个问题。如果你想补充这一点作为回答，我可以接受吗？很高兴它奏效了！你用
空白：nowrap
完善了我的猜测-因此答案由你来补充。
$( 'table.user-members-data thead th' ).each( function(){
    var header = $( this ).html()

    if( jQuery.inArray( header, response.jquery_data.editable_columns ) !== -1 ){
        $( this ).html( '<span style="display:block; white-space:nowrap;">' + header + ' <i class="fas fa-pencil-alt" edit="' + header + '"></i></span>' )
    }
})