Question

我有一个闪亮的应用程序，并排有两个数据表。当窗口宽度发生变化时，是否有任何选项可以自动调整表格或列的大小？

理想情况下，我希望看到所有列（可能缩小字体大小），两个表中没有X滚动条，并且表并排。下面的代码使表格在窗口大小减小时重叠。

library(shiny)
library(DT)

shinyApp(
    ui = fluidPage(
      fluidRow(
        column(5,
               dataTableOutput('table.1')
        ),
        column(2
        ),
        column(5,
               dataTableOutput('table.2')
        )
      )
    ),
    server = function(input, output) {
      output$table.1 <- renderDataTable(iris,options = list(autoWidth = TRUE))

      output$table.2 <-  renderDataTable(iris,options = list(autoWidth = TRUE))
    }
  )

Answer 1

如评论中所述，CSS可以使用基于视口的文本大小为您处理此问题。我冒昧地还包括用于指定最大文本大小的语法，以防用户具有异常宽的屏幕：

library("shiny")
library("DT")

shinyApp(
  fluidPage(
    tags$head(
      tags$style(
        HTML("
          .datatables {
              font-size: 1.5vw;
          }

          @media screen and (min-width: 1024px) {
              .datatables {
                  font-size: 12px;
              }
          }
        ")
      )
    ),
    dataTableOutput("iris")),
  function(input, output) {
    output$iris = renderDataTable({
      datatable(iris)
    })
  }
)

This答案有关视口百分比长度的更多信息，this答案提供了最大尺寸的示例。

数据表列自动调整大小

1 个答案: