R

Question

我有一个名为 df 的数据框，我在 Rmarkdown 中使用 html 格式来创建数据框，但由于单元格大小不同，背景中的颜色不能完全填充单元格，并且有空格。

我使用的代码是：

df = structure(list(projects = c("Restaurant, Pizzeria and Pasta House Works for  New York",
                                "London Project - New Restaurant  Project", 
                                "Athens - Beautiful Lands for Aigaleo City Project",
                                "Berlin City - Exhibition  near the airport with restaurants",
                                "Pizzeria Buenos Aires New italian restaurant - pasta, tartufo and vino",
                                "area mean value", "total mean value"), 
                    happiness.and.joyfullness = c(3.5,4, 3, 3.2, 4, 5, 3), 
                    joy.for.children = c(3, 5, 3, 4, 5,4, 4), 
                    area = c(3, 5, 3, 3, 3, 4, 4), 
                    damages.from.environment = c(2,4, 2, 3, 3, 5, 5), 
                    approach  = c(3, 1, 5,3, 5, 5, 4), 
                    expensive = c(3, 5, 3, 4, 5, 5, 5), 
                    safety.comes.first = c(5,5, 5, 5, 5, 5, 4),
                    hungry = c(3, 5, 2, 4, 5,5, 5)), 
               row.names = c(NA, -7L), 
               class = c("tbl_df", "tbl","data.frame"))






set_background  = function(x, color = "white") {
  kableExtra::cell_spec(x,
                        bold = TRUE,
                        align = "center",
                        color = "black", 
                        background = color,
                        extra_css ="align-items: center;
      justify-content: center;margin: -5px; padding: 15px; display: flex;",
                       background_as_tile = FALSE
      )}

set_background2  = function(x, color = "black") {
  kableExtra::cell_spec(x,
                        bold = TRUE,
                        color="black", 
                        background = color,
                        extra_css ="align-items: center;
      justify-content: center;margin: -5px; padding: 10px; display: flex;",
                        background_as_tile = FALSE)
}



df %>%

  dplyr::mutate( across(projects, \(x) case_when(projects == "area mean value" ~set_background2(x, "yellow") ,
                                              projects == "total mean value" ~set_background2(x, "yellow"),
                                              TRUE ~ projects)))%>%
  dplyr::mutate( 
    across(happiness.and.joyfullness:hungry, \(x)
           case_when(
             x <= 3.5  ~ set_background(x, "lightblue"),
             x > 3.5  & x <= 4.5  ~ set_background(x, "pink"),
             x > 4.5  & x <= 5    ~ set_background(x, "purple"),
             TRUE ~ set_background(x))))%>%
  kableExtra::kbl(align = "c",position = "center",caption = "Project Scoring Table", escape=FALSE)%>%
  kableExtra::kable_paper()%>%
  kableExtra::row_spec(0,color = "white", background = "grey")%>%
  kableExtra::column_spec(1:9, 
                          bold = TRUE,
                          border_left  = TRUE,
                          border_right = TRUE)%>%
  kableExtra::row_spec(0:7, align = "center",extra_css = "vertical-align:middle;")

导致：

如何在 R 中修复 html Rmarkdown 文档的问题？我只是在玩弄桨和边距，我让东西变得越来越大。问题是当我通过 rmarkdown 将其渲染为 html 时会出现白色间距

Answer 1

为什么不起作用

检查 kableExtra 生成的 HTML 输出显示单元格内容被包装在

span

元素中。

<td style="text-align:center;font-weight: bold;border-left:1px solid;border-right:1px solid;text-align: center;vertical-align:middle;">
    <span style="font-weight: bold; color: black !important;padding-right: 4px; padding-left: 4px; background-color: pink !important; align-items: center; justify-content: center; margin: -5px; padding: 15px; display: flex; text-align: center;">
        4
    </span>
</td>

由于 HTML 表格行和单元格显示方式的特殊性，

span

无法确定其父单元格元素的高度，因此简单地将高度设置为 100% 将不起作用。您可以将高度设置为固定值，例如

150px

，但这意味着任何内容很长的单元格都会溢出内容。

做什么

制作内部

span

填充其包含的表格单元格是非常困难的，正如之前的问题 已经指出的那样。在这种情况下，最简单的方法可能是在每个

position: relative

元素上设置

td

，并在每个

position: absolute

元素上设置

span

。然后我们可以将

top

的

right

、

bottom

、

left

和

span

属性设置为 0，使它们覆盖整个单元格。

从上面给出的 HTML 中，我们可以看到您传入

extra_css

到

kableExtra::cell_spec

（在

set_background

函数中）的样式被应用于

span

。似乎传递给

kableExtra::row_spec

的样式正在应用于每个

td

。因此，我们应该能够分别使用

td

和

span

来更改

row_spec

和

cell_spec

的位置。

如何做

因此，要给每个

td

元素相对定位，请在最后一行调用

extra_css

时更新

row_spec

。

kableExtra::row_spec(
    0:7,
    align = "center",
    extra_css = "
        vertical-align: middle;
        position: relative;
    "
)

要给予

span

绝对定位，请在

extra_css

函数中更新对

cell_spec

的调用中的

set_background

。您还可以删除负边距。

set_background  = function(x, color = "white") {
    kableExtra::cell_spec(
        x,
        bold = TRUE,
        align = "center",
        color = "black", 
        background = color,
        extra_css = "
            align-items: center;
            justify-content: center;
            padding: 15px;
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        ",
        background_as_tile = FALSE
    )
}

这给出了以下输出：