英文:
Apply css styling to a single DT datatable
问题
我在我的Shiny应用程序中有一对DT数据表。我想通过固定宽度来控制其中一个表的宽度，同时保持另一个表的宽度动态变化。在尝试了多种固定列宽度的方法后，对于我的应用程序来说，似乎最好的方法是使用样式`table.dataTable {table-layout: fixed;}`。然而，这会影响到两个表格。如何将这个样式的影响限制在第二个表格上？
英文:
I have a pair of DT datatables in my shiny app. I would like to control the width of one of these tables (via fixed-width) while leaving the width of the other table dynamic.
After trialing a number of approaches for fixing columns widths, the one that seems best for my application is to use the styling table.dataTable {table-layout: fixed;}. However, this effects both tables.
How can I limit the effect of this style to just the second table?
data(starwars)starwars = starwars[1:5,1:4]ui = fluidPage(DT::dataTableOutput("variable_width"),tags$style(HTML("table.dataTable {table-layout: fixed;}")),DT::dataTableOutput("fixed_width"))server = function(input, output, session){output$variable_width = DT::renderDataTable({ starwars }, options = list(dom = "t"))output$fixed_width = DT::renderDataTable({ starwars }, options = list(dom = "t"))}shinyApp(ui, server)
From searching, it looks like this should be possible via div: That you can limit styling to only the current div. However, I am unable to get this working.
答案1
得分: 1
你需要在你的CSS中添加父级div，就像这样：
tags$style(HTML("#fixed_width > .dataTables_wrapper > table.dataTable {table-layout: fixed;}"))
其中#fixed_width是你第二个表格的outputId（也是一个div id）。
英文:
You need to add what are the parents div in you CSS, like this :
tags$style(HTML("#fixed_width > .dataTables_wrapper > table.dataTable {table-layout: fixed;}")),
With #fixed_width being the outputId (which is also a div id) of you second table.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论