DataTables 导出按钮与右下角对齐答案

【问题标题】：DataTables Export Buttons Align to Bottom RightDataTables 导出按钮与右下角对齐
【发布时间】：2021-01-29 14:40:02
【问题描述】：

在我的项目中使用 DataTables 时，当我使用 float:right 将导出按钮对齐到表的右侧时。它没有与表格的右边缘正确对齐。而当我设置 float:left 时它正确对齐。

请为此提出解决方案。

$(" #adminMainTable,#managerMainTable").DataTable( {
    scrollY:        '50vh',
    scrollCollapse: true,
    paging:         false,
    dom: 'frtpB', //This changes the position to Bottom
    buttons: [
        { extend: 'excelHtml5', text: 'To Excel' },
        { extend: 'csvHtml5', text: 'To CSV' },
        { extend: 'pdfHtml5', text: 'To PDF' }
        
    ]
    
});

//下面的代码是用来改变表格右侧按钮的位置

$("div#adminMainTable_wrapper,div#managerMainTable_wrapper").find($(".dt-buttons")).css("float","right");

【问题讨论】：

您能否提供重现此内容所需的代码（minimal reproducible example）？
如果您还没有这样做，您可以使用tour 并阅读How to Ask。
@andrewjames 抱歉，我已经添加了我所做更改的代码

标签： html css datatables

【解决方案1】：

对您的代码使用类似的方法进行右浮动，您可以这样做：

$(your selector in here).find($(".dt-buttons button.dt-button:nth-child(3)")).css("margin-right","0");

换句话说，从最后一个按钮中删除右边距。

您可以使用:last-child，而不是:nth-child(3)。如果按钮的数量发生变化，那可能会更安全。

【讨论】：

这解决了我的问题。非常感谢安德鲁詹姆斯 :)