Centre align R Markdown kable table

Using Themes
1

I am fairly new to Hugo (academic). I am building using R Markdown. In my .rmd file, I produce a table and print this with kable, with position set to center. This works in a normal .rmd file, but my table remains left aligned in the served site. Any ideas how I can centre align the table? See a reproducible example of the R code inside my .rmd file.

library(dplyr)
tab <- data.frame(v1=c(1,2,3),
                 v2=c(4,5,6))

kableExtra::kable(tab, col.names = c("V1", "V2"), 
                 align = 'c') %>%
 kableExtra::kable_styling(position = "center")
2

What does the HTML from Hugo look like for the table? Any CSS classes you can use to center it?

3

Thank you for your response. The HTML output from Hugo for the table:

<table class="table" style="margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="text-align:center;">
V1
</th>
<th style="text-align:center;">
V2
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center;">
1
</td>
<td style="text-align:center;">
4
</td>
</tr>
<tr>
<td style="text-align:center;">
2
</td>
<td style="text-align:center;">
5
</td>
</tr>
<tr>
<td style="text-align:center;">
3
</td>
<td style="text-align:center;">
6
</td>
</tr>
</tbody>
</table>

I am unsure how I would use an CSS class to centre it. Google wasn’t of much help. If you are aware of a guide that might point me in the right direction, I would really appreciate it.

4

If you have a public repository for this site, I can take a look at your code. There is a ‘table’ class set on the table element, so you could define some CSS properties for the table class to center it. Having said that, I’m not sure why it isn’t already centered, because style="margin-left: auto; margin-right: auto;" should do the trick. Maybe something is overriding those styles. I’d have to see the code and site itself to diagnose further.

5

I really appreciate that! I have made the repository public. Please find an example Rmd here:

6

Thank you, sorry to not reply earlier, I just noticed your response today. I’ll take a look this morning. Do you have a URL for the built site?

7

No worries at all, thanks for offering to take a look. I haven’t set up a URL yet, been using RStudio to serve the site and view it in my browser.

8

Ok, I didn’t see anything obvious in any of the CSS. There is a lot going on there, between the theme styles, Bootstrap and styles in the HTML elements. I would inspect the table in browser and try to figure out what is controlling the alignment. Is it element, is it an important override somewhere in theme or Bootstrap, etc. If you get this hosted online somewhere I can look too, but that’s how I would go about figuring out what’s in control. Honestly, I use Tailwinds now for everything and it is so nice to have utility classes right in the element that you are looking at. There isn’t any guessing what is controlling the layout.

9

Okay, thanks for looking into this! I will be getting the site hosted soon. If I find a solution I’ll report back!

And I’ll check out Tailwinds, hadn’t heard of it before. Looks pretty sleek.

1 Like