关于R DataTables按钮未显示在表格上方（显示于表格两侧）的技术咨询

看起来你遇到的是R语言DT包里DataTables按钮布局的棘手问题——按钮没乖乖待在表格上方，反而跑到表格两侧去了。我之前也碰到过类似情况，光调dom参数有时候不够，往往还得配合CSS样式强制修正布局，下面给你几个可行的解决方案：

方案1：修正dom参数并注入自定义CSS #

你之前试的dom = 'Bfrtip'或者<B>frtip写法本身是对的，但可能被默认CSS样式干扰了。可以通过initComplete选项在表格加载完成后，给按钮容器加上独占一行的样式：

datatable(data_tabel, 
          extensions = c("Buttons","KeyTable"), 
          options = list( 
            dom = 'Bfrtip', 
            buttons = list('copy', 'print', 
                          list( 
                            extend = 'collection', 
                            buttons = list( 
                              list(extend = 'csv', filename = 'BPTrait'), 
                              list(extend = 'excel', filename = 'BPTrait'), 
                              list(extend = 'pdf', filename = 'BPTrait') 
                            ), 
                            text = 'Download' 
                          )), 
            keys = TRUE,
            initComplete = JS(
              "function(settings, json) {
                $('div.dt-buttons').css('display', 'block');
              }"
            )
          ), 
          rownames=FALSE, 
          colnames = c("Variant ID","Protein","Trait","-log10(p-value)")
)

这段代码会把按钮容器（div.dt-buttons）设置为块级元素，强制它单独占一行，不会和表格并排显示。

方案2：手动分离按钮与表格布局 #

如果上面的方法还不行，可以直接把按钮放到表格上方的独立容器里，完全掌控位置：

# 先单独创建按钮元素
button_html <- htmltools::tags$div(
  class = "dt-buttons-container",
  style = "margin-bottom: 10px;",
  DT::DTButtons(
    data_tabel,
    buttons = list('copy', 'print', 
                  list( 
                    extend = 'collection', 
                    buttons = list( 
                      list(extend = 'csv', filename = 'BPTrait'), 
                      list(extend = 'excel', filename = 'BPTrait'), 
                      list(extend = 'pdf', filename = 'BPTrait') 
                    ), 
                    text = 'Download' 
                  ))
  )
)

# 把按钮和表格组合起来
htmltools::tagList(
  button_html,
  datatable(data_tabel, 
            extensions = c("KeyTable"), 
            options = list( 
              dom = 'frtip', # 这里去掉B，因为按钮已经单独放置
              keys = TRUE
            ), 
            rownames=FALSE, 
            colnames = c("Variant ID","Protein","Trait","-log10(p-value)")
  )
)

这种方法彻底分离了按钮和表格的布局，按钮会稳稳显示在表格上方，完全不受表格默认样式的影响。

方案3：添加全局CSS样式统一修正 #

如果你的项目里有多个DT表格都存在这个问题，可以在页面头部添加全局CSS，一次性解决所有表格的按钮布局：

htmltools::tags$head(
  htmltools::tags$style(
    HTML("
      div.dt-buttons {
        display: block !important;
        margin-bottom: 10px;
      }
    ")
  )
)

把这段代码放在所有DT表格代码之前，就能全局强制按钮容器为块级元素，固定在表格上方。

补充说明 #

按钮跑到两侧通常是因为默认CSS把按钮容器设置成了inline-block或float属性，或者表格容器宽度不足。上面的方案核心都是通过强制按钮容器为块级元素，让它独占一行，从而固定在表格上方。

内容的提问来源于stack exchange，提问作者okraw