Can we modify the cell width in knitr and pandoc?

Question

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells?

---
output:
  html_document:
theme: cosmo
---

{r results ="asis", echo=FALSE, warning=FALSE, kable}
library(knitr)
library(markdown)
library(pander)

for (i in 1:12) {
  df = data.frame(matrix(rnorm(i), nrow=2))
  cat(pandoc.table(df, split.table = Inf))
}

I attempted to use CSS to set a fixed width for the tables by setting it to "auto" and aligning them left, but I was unsuccessful. Any suggestions on how to achieve this?

html css r knitr

Answer 1

Answer №1

The reason for this issue is the width: 100% setting in the original CSS file. To fix this, you can override it using a custom theme or additional CSS like the following simple snippet:

table {
  width: auto !important;
}

By adding the !important rule, you are prioritizing the new width value over the existing 100%. Save this code as a separate file, for example, custom.css and reference it in the YAML header of your document:

---
output:
  html_document:
    theme: cosmo
    css: custom.css
---

And by the way, there is no need to display the output of pander with cat command :)

Answer 2

The reason for this issue is the width: 100% setting in the original CSS file. To fix this, you can override it using a custom theme or additional CSS like the following simple snippet:

table {
  width: auto !important;
}

By adding the !important rule, you are prioritizing the new width value over the existing 100%. Save this code as a separate file, for example, custom.css and reference it in the YAML header of your document:

---
output:
  html_document:
    theme: cosmo
    css: custom.css
---

And by the way, there is no need to display the output of pander with cat command :)

Can we modify the cell width in knitr and pandoc?

Answer №1

Similar questions

I seem to be having an issue here - my style sheet just won't load

Android experiencing issues with dynamically loading Border XML

Arranging information within the Ngb-Accordion

Confusing Accessibility Rules: A Guide that Leaves Me Scratching My Head

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

Is a webpage's sluggishness in Internet Explorer due to its lengthy page structure causing issues while loading quickly on other browsers?

Revitalizing HTML and Google Maps with AJAX, PHP, and JQuery

showcasing a set of div elements by using forward and backward buttons

Identifying point categories through data grids in R

After submitting the form, I must only deactivate the checkbox that has been selected

Performing two ajax calls within a non-existent div that has only just been appended

Differences in HTML animations can be seen when comparing Google Chrome to Microsoft Edge. Looking for a workaround for autoplay to ensure

I have to define a specific identifier in Django so that I can easily incorporate it into Bootstrap later on

Emphasize the active item in the PHP header

vertical alignment, almost there

Why is it that only one of these .php functions is functional?

Disorganized jQuery Animation

Retrieve only the initial tag content using jquery

Exploring the Prediction clarification of Multinomial Naive Bayes within the bnlearn software

The footers on each page are not consistent