fixed_thead doesn't work with add_header_above (more than two rows)

[Chanelle280]

Describe the bug I'm trying to create a table with two headers, one for the number of exam writers and pass rates, and another header on top by year. When I add fixed_thead, it only freezes the exam pass rates and not the years when you scroll down.

I also don't like how the blue background doesn't extend across the whole table above "Attempt". Is there a work around?

library(kableExtra)

exam_pass_rates %>%
  kable(col.names = c("Student Name", "Language of exam", "Writes", "Pass Rate", "Writes", "Pass Rate", "Writes", "Pass Rate", "Writes", "Pass Rate" )),
               align = c("l", "l", rep("r", four_year_tables * 2))) %>%
  kable_styling(
    bootstrap_options = "hover",
    font = 12,
    fixed_thead) %>%
  add_header_above(c(
    " " = 2,
    "2017" = 2,
    "2018" = 2,
    "2019*" = 2,
    "2020" = 2))

<img width="430" alt="header example" src="https://user-images.githubusercontent.com/74219146/138895785-f1242a5b-fd7e-4cd4-be80-f27c701f8d97.PNG">

[miargentieri]

I'm also struggling with this same issue. Can't find a way to get fixed_thead in kable_styling() to also apply to the headers created by add_header_above(). @haozhu233 any advice or workaround ideas? Thanks!

[Chanelle280]

@miargentieri here was my workaround. Add a CSS and JS code block

Fixing add_header_above for fixed_thead to account for two headers

thead tr th {
  position: sticky;
  background-color: #005D7D;
}

thead tr:nth-child(1) th {
  top: 0;
  background-color: #005D7D;
}

<!-- Fixing add_header_above for fixed_thead to account for two headers -->

$(document).ready(function(){
  setTimeout(function(){
    var h = $('thead tr:nth-child(1)').height();
    $('thead tr:nth-child(2) th').css('top', h);
  }, 500);
});

[miargentieri]

@Chanelle280 Thanks so much for the suggestion! I'm having a bit of trouble implementing it, as I'm not very familiar with adding CSS and JS code blocks. Below is a minimal example that shows the problem. How would you implement your code with this to solve this issue and get table to display correctly in RStudio?

table <- knitr::kable(mtcars)_ %>%
    kableExtra::add_header_above(c(" " = 1, "Header 1" = 5, "Header 2" = 6)) %>%
    kableExtra::kable_styling(fixed_thead = TRUE) 

[Chanelle280]

@miargentieri so I was creating an r markdown file, so I was able to add code chunks ‘’’{css}

And ‘’’{js}

The first part you would wrap in css and the second part you would wrap in js. I’m not sure how you would do this in a regular script.

let me know if that works

[miargentieri]

Ok, thanks. I'm looking for a solution that will allow me to alter the sticky headings of the kable object itself and let me save it using save_kable() instead of knitting a whole markdown document. Thanks, though!