数据表：header 中的 font-awesome 图标显示在新行中的问题

Question

我正在为网站上的用户详细信息创建管理视图。从那个角度来看，我希望管理员能够编辑某些 table 中的某些列，但不是所有列。为了指示哪些列是 editable，我使用 font-awesome 图标来显示该列是 editable。将应用 JS，然后允许管理员进行任何编辑。但是，我坚持格式无法按预期工作。它不断在新行上显示图标，创建丑陋的 table，如下所示：

HTML
我已经尝试了几种加载 table 的方法，因此它会被正确渲染，但我尝试过的任何方法都没有奏效。 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>

jQuery
在 return 上，数据 table 被初始化，但在初始化之前，编辑图标被添加到相关的列标题。 editable 列被 return 编辑为一个单独的 json_encoded 数组，并根据 (jquery_data.editable_columns):

检查

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

    if( jQuery.inArray( header, response.jquery_data.editable_columns ) !== -1 ){
        $( this ).html( header + ' <i class="fas fa-pencil-alt" edit="' + header + '"></i>' )
    }
})
$( 'table.user-members-data' ).DataTable( {
    'scrollX'  : true,
    'ordering' : false,
    'paging'   : false,
    'info'     : false,
    'searching': false
} )

通过HTML
加载图标或者我调整了树枝以包含编辑图标并加载数据 table 而不 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 %}

这导致新行出现完全相同的问题。

columns.adjust()
在其他地方，我看到建议在绘制 Datatables 之后使用它来解决任何宽度问题。这对我也没有用。

感觉好像Datatable在设置列宽的时候根本就看不到图标？

Answer 1

感谢 andrewjames 在评论中指路。

解决方案是将标题包裹在一个范围内，并添加 display:block; 和 white-space:no-wrap; 作为样式。

$( '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>' )
    }
})

数据表：header 中的 font-awesome 图标显示在新行中的问题

Datatables: Issue with font-awesome icon in header being displayed on new line

datatables

twig

font-awesome