Заливка границы ячейки цветом в файле html Rmarkdown в R

У меня есть фрейм данных под названием df, и я использую формат html в Rmarkdown для создания фрейма данных, но из-за разного размера ячеек цвет фона не заполняется точно в ячейке, и у меня есть пробелы.

Код, который я использую:


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? Я просто играю с заполнением и полями и делаю вещи все больше и больше. Проблема в том, что пробелы появляются, когда я визуализирую их в html через rmarkdown.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
4
0
134
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Почему это не работает

Проверка вывода HTML, сгенерированного kableExtra, показывает, что содержимое ячейки заключено в элементы 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 и leftspan на 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
    )
}

Это дает следующий результат:

спасибо за разъяснения в начале. Я считаю это очень полезным. Когда я запускаю код вашего решения, последние две ячейки в первом столбце (желтые ячейки) перекрывают друг друга.

Homer Jay Simpson 26.04.2024 17:30

Другие вопросы по теме