R闪亮可渲染-如何更改边框宽度和颜色
我可能有一个简单的问题，但由于我对CSS/htlm不太熟悉，我很难解决以下问题。 在我的ui中，我有以下简单的表格：R闪亮可渲染-如何更改边框宽度和颜色,r,shiny,shinydashboard,R,Shiny,Shinydashboard,我可能有一个简单的问题，但由于我对CSS/htlm不太熟悉，我很难解决以下问题。 在我的ui中，我有以下简单的表格： tableOutput("retail_dashboard_ratios_table") 在服务器中，我有以下非常简单的代码： output$retail_dashboard_ratios_table <- renderTable({ # df <- head(mtcars) }) 我需要做的就是将边框宽度和边框颜色设置为蓝色。 我不得不使用R3.4版本。 因为
tableOutput("retail_dashboard_ratios_table")
output$retail_dashboard_ratios_table <- renderTable({ #
df <- head(mtcars)
})
source("global.R")
today <- as.character()
ui <- dashboardPage(
title = "Dashboard of the Municipal Market", # this is the name of the tab in Chrome browserr
dashboardHeader(title = "Web Portal"),
dashboardSidebar(
sidebarMenu(
menuItem('Retail', tabName = "retail", icon = icon("th"),
menuItem('Dashboard', tabName = 'retail_dashboard'))
)
),
dashboardBody(
tabItem(tabName = "retail_dashboard",
tabsetPanel(type = "tabs",
tabPanel("Dashboard",
h3("Test."),
tags$head(
tags$style(HTML("
.my_table_aa01 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
border-collapse: collapse;
}
.my_table_aa01 th {
border: 1px solid black !important;
text-align: center !important;
vertical-align: middle !important;
color: white !important;
background-color: #615858 !important;
white-space: nowrap;
border-bottom: none}
.my_table_aa01 td {padding: 1rem;
border: 1px solid black;}
.my_table_aa01 tr:first-child {
border : 1px solid black;
border-top: 1px solid black;}
.my_table_aa01 tr:nth-child(even){
background-color: #afd19d;
color: black;
font-size:16px;}
.my_table_aa01 tr:nth-child(odd){
background-color: white;
color: black;
font-size:16px;
}
"))),
fluidRow(column(2,
actionButton(inputId = "retail_dashboard_load_data_btn", label = "Load / Refresh Data")),
column(2,
downloadButton("download_dashboard_data","Download Data"))),
fluidRow(
column(2,
dateInput("retail_dashboard_start_dt", label = ("Start Date"), value = glob_date_1yr_ago)),
column(2,
dateInput("retail_dashboard_end_dt", label = ("End Date"), value = glob_previous_to_most_recent_date_with_quant_model_regression_data))
),
br(),
fluidRow(column(6,
div(textOutput(outputId = "retail_dashboard_error_log")))),
br(),
fluidRow(column(3,
plotlyOutput(outputId = "retail_dashboard_plot1", width = '350', height = '350px')),
column(3,
offset = 0,
tags$div(
class="my_table_aa01", # set to custom class
tableOutput("retail_dashboard_ratios_table") )
)),
fluidRow(column(3,
tableOutput("retail_dashboard_table2")))
)
)
)
)
)
server <- function(input, output, session) {
source("Page_retail_dash.R", local=T)
}
cat("\nLaunching 'shinyApp' ....")
shinyApp(ui, server)
一个更优雅的解决方案可能会使用样式表，但是如果只是一个表，您可以简单地将CSS添加到HTML标题中，如下所示。更多关于这方面的信息可以找到。我发现棘手的部分通常是知道覆盖哪个类，就像在本例中一样。。。。但是找到你要查找的内容的一个简单方法是在运行时检查HTML，例如，在Google Chrome中，你可以右键单击并检查浏览器窗口中的任何位置，最好靠近你想要设置样式的元素。然后，您可以在运行时在浏览器中编辑样式，以预览对CSS的更改将如何影响应用程序的外观。我对CSS也不是很熟悉，但这种方法通常让我走了很长的路 希望这有帮助
shinyApp(
# --- User Interface --- #
ui = fluidPage(
# The below overwrites the default styling for the top border of table cells.
# I've changed the colour to blue from grey and the width to 3px from 1px.
tags$head(
tags$style(HTML("
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 3px solid blue;
}
"))
),
mainPanel(
tableOutput("retail_dashboard_ratios_table")
)
),
# --- Server logic --- #
server = function(input, output) {
output$retail_dashboard_ratios_table <- renderTable({ #
df <- head(mtcars)
})
}
)
更优雅的解决方案可能适用于样式表，但如果只是一个表，您可以简单地将CSS添加到HTML标题中，如下所示。更多关于这方面的信息可以找到。我发现棘手的部分通常是知道覆盖哪个类，就像在本例中一样。。。。但是找到你要查找的内容的一个简单方法是在运行时检查HTML，例如，在Google Chrome中，你可以右键单击并检查浏览器窗口中的任何位置，最好靠近你想要设置样式的元素。然后，您可以在运行时在浏览器中编辑样式，以预览对CSS的更改将如何影响应用程序的外观。我对CSS也不是很熟悉，但这种方法通常让我走了很长的路 希望这有帮助
shinyApp(
# --- User Interface --- #
ui = fluidPage(
# The below overwrites the default styling for the top border of table cells.
# I've changed the colour to blue from grey and the width to 3px from 1px.
tags$head(
tags$style(HTML("
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 3px solid blue;
}
"))
),
mainPanel(
tableOutput("retail_dashboard_ratios_table")
)
),
# --- Server logic --- #
server = function(input, output) {
output$retail_dashboard_ratios_table <- renderTable({ #
df <- head(mtcars)
})
}
)
@SusanSwitzer问得好。请允许我解释一下。我真正的目标是在一行中既有一个小绘图，也有一个小表格。我试图通过使用fluidRow column3，PlotlyOutputPutId=retail\u dashboard\u plot1，width='350'，height='350px'，column3，offset=0，DataTableOutputDetail\u dashboard\u ratios\u table来实现这个目标，但是布局完全搞砸了up@SusanSwitzer实际上，tableOutput可能是我所需要的全部，我只是想弄清楚如何自定义边界。到目前为止，我成功地将ui中的代码更新为：TableOutputDetail_dashboard_ratios_table，tags$styletype=text/css，retail_dashboard_ratios_table tr:last child{font-weight:bold；}，这段代码似乎将最后一行加粗了。我在网上随机找到的。因此，我想有一种方法可以使用css自定义边框，并尝试安装旧版本的tableHTML@SusanSwitzer好问题。请允许我解释一下。我真正的目标是在一行中既有一个小绘图，也有一个小表格。我试图通过使用fluidRow column3，PlotlyOutputPutId=retail\u dashboard\u plot1，width='350'，height='350px'，column3，offset=0，DataTableOutputDetail\u dashboard\u ratios\u table来实现这个目标，但是布局完全搞砸了up@SusanSwitzer实际上，tableOutput可能是我所需要的全部，我只是想弄清楚如何自定义边界。到目前为止，我成功地将ui中的代码更新为：TableOutputDetail_dashboard_ratios_table，tags$styletype=text/css，retail_dashboard_ratios_table tr:last child{font-weight:bold；}，这段代码似乎将最后一行加粗了。我在网上随机找到的。因此，我想有一种css方法可以定制边框，也可以尝试安装旧版本的TableHtmlTank you Patrick。请允许我澄清一个问题。我检查了网页，分配给table元素的类是闪亮的html输出闪亮的绑定输出。然后，我尝试使用：tags$styleHTML'.shinny html输出shinny绑定输出{border collapse:collapse；font size:20px；color:red；}但这一变化影响了艾尔
l在我闪亮的应用程序中打开表格。有什么办法可以避免吗？谢谢，@Angelo，我已经编辑了答案。第二个示例实现了您想要实现的目标。在本例中，您希望为单个表创建自定义类，而不是覆盖所有表的默认样式。这与您在评论中建议的样式标记的工作方式完全相同。自定义类可以以相同的方式在应用程序中的任何位置重用。如果你开始在你的应用程序中增加更多的CSS，你应该考虑把所有CSS代码放到样式表中。希望这有帮助！谢谢你到目前为止的帮助！代码中显示的内容对我来说很有意义，但不知何故，当我检查其他表时，它们现在显示的格式与.my_table类相同。可能缺少什么吗？嗯，这很奇怪，我添加了一张代码生成的输出的图片。您是否尝试过将代码复制到R控制台并运行它？我试图让它更清楚地说明如何分配CSS类以及在哪里不分配。希望这能澄清它！嗨，Patrick，我将在我的初始问题中列出我全部代码的95%。我用的是你同样的逻辑，我在同一页上打印的两张表有同样的格式，尽管不应该是这样谢谢你，帕特里克。请允许我澄清一个问题。我检查了网页，分配给table元素的类是闪亮的html输出闪亮的绑定输出。然后，我尝试使用：tags$styleHTML'.shinny html输出shinny绑定输出{border collapse:collapse；font size:20px；color:red；}但这一变化影响了我闪亮应用程序中的所有表格。有什么办法可以避免吗？谢谢，@Angelo，我已经编辑了答案。第二个示例实现了您想要实现的目标。在本例中，您希望为单个表创建自定义类，而不是覆盖所有表的默认样式。这与您在评论中建议的样式标记的工作方式完全相同。自定义类可以以相同的方式在应用程序中的任何位置重用。如果你开始在你的应用程序中增加更多的CSS，你应该考虑把所有CSS代码放到样式表中。希望这有帮助！谢谢你到目前为止的帮助！代码中显示的内容对我来说很有意义，但不知何故，当我检查其他表时，它们现在显示的格式与.my_table类相同。可能缺少什么吗？嗯，这很奇怪，我添加了一张代码生成的输出的图片。您是否尝试过将代码复制到R控制台并运行它？我试图让它更清楚地说明如何分配CSS类以及在哪里不分配。希望这能澄清它！嗨，Patrick，我将在我的初始问题中列出我全部代码的95%。我使用的是相同的逻辑，我在同一页上打印的两个表具有相同的格式，即使不应该是这样