Extend Spanner Bottom Border in {gt} to Full Width in v0.10.0

I am updating R and my version of {gt} will be updated from 0.7.0 to 0.10.0. With this update, I am having some issues reproducing a table.

My current process in 0.7.0 is:

library(gt)

mtcars %>% 
  mutate(Model = rownames(.)) %>% 
  relocate(Model) %>% 
  head() %>% 
  gt() %>% 
  # Add spanner
  tab_spanner(
    label = "vars",
    columns = 2:12
  ) %>% 
  # Make borders black on data 
  tab_style(
    style = cell_borders(
      sides = "all",
      color = "black"
    ),
    locations = cells_body()
  ) %>%
  # Make borders black on column labels and spanners
  tab_style(
    style = cell_borders(
      sides = "all",
      color = "black"
    ),
    locations = list(cells_column_labels(),
                     cells_column_spanners())
  ) %>%
  gt::tab_options(
    column_labels.border.bottom.width = px(1), # Fix column label and spanner bottom border
    column_labels.border.bottom.color = "white", # "Remove" column label and spanner bottom border
    column_labels.border.top.width = px(1), # Fix column label top border
    table.border.bottom.width = px(1), # Fix table bottom border
    table.border.top.width = px(1), # Fix table top border
    table_body.border.top.width = px(1), # Fix body top border
    table_body.border.bottom.width = px(1) # Fix body bottom border
  )

The issue is when using 0.10.0, the bottom border of the spanner is now missing. I can fix that by removing the column_labels.border.bottom.color = "white" from the tab_options(), and in fact, I can remove all tab_options(), but I am left with the bottom border of the spanner not extending the entire width of the spanner.

mtcars %>% 
  mutate(Model = rownames(.)) %>% 
  relocate(Model) %>% 
  head() %>% 
  gt() %>% 
  tab_spanner(
    label = "vars",
    columns = 2:12
  ) %>% 
  tab_style(
    style = cell_borders(
      sides = "all",
      color = "black"
    ),
    locations = cells_body()
  ) %>%
  tab_style(
    style = cell_borders(
      sides = "all",
      color = "black"
    ),
    locations = list(cells_column_labels(),
                     cells_column_spanners())
  )

It seems like the tab_style() which previously added a new border for the spanner (the last tab_style() in both sets of code) in 0.7.0 no longer does anything with this bottom border in 0.10.0 seeing as the color is not even set to black. I can use the tab_options() to change the color to black but I cannot figure out how to extend the line the full width of the spanner.

I know there is a github issue filed with these spanner borders, but the work around presented of making the new bottom border and removing the default spanner border does not work in this latest version as, again, there seems to only be to one, default, border allowed.

Does anyone know of a work around to extend this bottom spanner border?

Thanks in advance!

The issue seems to be that by default some padding is added to the left of the spanner.

Hence, one option to achieve your desired result would be to get rid of the padding using e.g. opt_css. There we can target the spanner using its id which defaults to the label=:

library(gt)
library(dplyr, warn=FALSE)

mtcars %>%
  mutate(Model = rownames(.)) %>%
  relocate(Model) %>%
  head() %>%
  gt() %>%
  # Add spanner
  tab_spanner(
    label = "vars",
    columns = 2:12
  ) %>%
  # Make borders black on data
  tab_style(
    style = cell_borders(
      sides = "all",
      color = "black"
    ),
    locations = cells_body()
  ) %>%
  # Make borders black on column labels and spanners
  tab_style(
    style = cell_borders(
      sides = "all",
      color = "black"
    ),
    locations = list(
      cells_column_labels(),
      cells_column_spanners()
    )
  ) %>%
  gt::tab_options(
    column_labels.border.bottom.width = px(1), # Fix column label and spanner bottom border
    column_labels.border.top.width = px(1), # Fix column label top border
    table.border.bottom.width = px(1), # Fix table bottom border
    table.border.top.width = px(1), # Fix table top border
    table_body.border.top.width = px(1), # Fix body top border
    table_body.border.bottom.width = px(1) # Fix body bottom border
  ) |> 
  opt_css(
    css = "
    #vars {
      padding-left: 0px !important;
    }
    "
  )

Or similar to the approach in the GH issue you referenced you could can target the spanner after adding an id to the table but where I target the spanner using the class gt_column_spanner_outer:

... %>%
gt(id = "gt") %>%
... %>%
opt_css(
  css = "#gt .gt_column_spanner_outer {
          padding-left: 0px !important;
        }"
)
``