How to make a more compact table?

[jkseppan]

In many cases, I find that the Bootstrap default table class has too much whitespace. The Bootstrap class table-sm would suit better, but is there any way to use that class for Markdown tables?

I found a Pandoc discussion where it is mentioned that Pandoc doesn't currently have a way to specify table classes in Markdown, and that the easiest route would be to post-process the HTML. Indeed the following solution (run after quarto) is somewhat hacky but works, but I would prefer something that lets me control the class in the Markdown source.

perl -pi -e 's/<table class="table">/<table class="table-sm">/g' _book/*.html

[mcanouil]

Customise the CSS for your own needs.

[jkseppan]

Sure, but how do I mark which tables should get the different CSS? I don't generally want to override every table (which my Perl solution does), I want to say that some specific tables should be more compact.

[mcanouil]

It will depends on how you generated the table.
It could be with a div cell, modifying the output of a code cell using class-output and/or attr-output, using (if R) the functions/options of knitr/kableExtra, gt, same for Python libraries that generate tables.

For a more specific answer, you are going to need to provide a small reproducible example of your use case.

[jkseppan]

I generated my table by writing a Markdown pipe table in a text editor. Here is a small example:

|   |   |   |   |   |    |    |    |    |    |   |   |   |   |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
|   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
|   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
|   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
|   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
|   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
|   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |

I tried making a Lua filter to change the table class inside a specially marked-up div. This works when running just Pandoc:

-- table-class.lua
function Div(div)
  klass = div.attributes["table-class"]
  if klass ~= nil then
    return div:walk {
      Table = function(tbl)
        tbl.classes = { klass }
        return tbl
      end
    }
  end
end

With this, I would modify the source as follows:

:::{table-class=table-sm}
|   |   |   |   |   |    |    |    |    |    |   |   |   |   |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
|   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
|   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
|   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
|   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
|   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
|   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |
:::

In raw Pandoc output, this generates a table with class table-sm. But if I list this filter in a Quarto document:

---
title: just testing
filters:
- table-class.lua
---

:::{table-class=table-sm}
|   |   |   |   |   |    |    |    |    |    |   |   |   |   |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
|   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
|   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
|   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
|   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
|   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
|   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |
:::

...the HTML output has both table and table-sm classes. Apparently Quarto adds the table class after my filter is run.

[mcanouil]

• table.lua:

  local function has_value (tab, val)
      for index, value in ipairs(tab) do
          if value == val then
              return true
          end
      end
  
      return false
  end
  
  function Div(div)
    if has_value(div.classes, "table-sm") then
      return div:walk {
        Table = function(tbl)
          tbl.attributes['class'] = "table-sm"
          return tbl
        end
      }
    end
  end

• index.qmd

  ---
  title: "Untitled"
  format: html
  filters:
    - table.lua
  ---
   
  :::{.table-sm}
   
  |   |   |   |   |   |    |    |    |    |    |   |   |   |   |
  |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
  |   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
  |   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
  |   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
  |   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
  |   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
  |   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
  |   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |
   
  :::
   
  |   |   |   |   |   |    |    |    |    |    |   |   |   |   |
  |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
  |   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
  |   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
  |   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
  |   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
  |   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
  |   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
  |   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |
   
  

[cderv]

I wonder if Quarto would accept a PR to prevent the change if the table already has some class attribute, or with a configuration option.

I think this is reasonable. You could open an issue about this and with your PR suggestion.

[a0th]

• table.lua:
  ```lua
  local function has_value (tab, val)
  for index, value in ipairs(tab) do
  if value == val then
  return true
  end
  end

      return false
  end
  
  function Div(div)
    if has_value(div.classes, "table-sm") then
      return div:walk {
        Table = function(tbl)
          tbl.attributes['class'] = "table-sm"
          return tbl
        end
      }
    end
  end
  ```
  

  • index.qmd

    ---
    title: "Untitled"
    format: html
    filters:
      - table.lua
    ---
     
    :::{.table-sm}
     
    |   |   |   |   |   |    |    |    |    |    |   |   |   |   |
    |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
    |   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
    |   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
    |   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
    |   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
    |   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
    |   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
    |   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |
     
    :::
     
    |   |   |   |   |   |    |    |    |    |    |   |   |   |   |
    |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
    |   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
    |   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
    |   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
    |   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
    |   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
    |   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
    |   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |
     
    

will this work for PDF?

[mcanouil]

No because it has nothing to do with LaTeX.

[a0th]

How could I make a PDF table more compact?

[mcanouil]

I am not sure to follow.
LaTeX tables are usually pretty much compact by default, there is no cell padding/margin contrary to bootstrap CSS / HTML.
Anyway, for LaTeX, to change the table layout you need to use LaTeX code: packages, options, etc.

[jkseppan]

This seems to work:

-- table-class.lua
function Div(div)
  klass = div.attributes["table-class"]
  if klass ~= nil then
    return div:walk {
      Table = function(tbl)
         tbl.classes = { klass }
         tbl.attributes.style = ""
        return tbl
      end,
      Tr = function(tr)
        tr.classes.remove("odd")
        tr.classes.remove("even")
        return tr
      end
    }
  end
end

---
title: just testing
filters:
- table-class.lua
---

|   |   |   |   |   |    |    |    |    |    |   |   |   |   |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
|   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
|   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
|   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
|   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
|   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
|   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |

:::{table-class="table-sm"}
|   |   |   |   |   |    |    |    |    |    |   |   |   |   |
|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|   |   |   |   |   |    |    | 1  |    |    |   |   |   |   |
|   |   |   |   |   |    | 1  |    | 1  |    |   |   |   |   |
|   |   |   |   |   | 1  |    | 2  |    | 1  |   |   |   |   |
|   |   |   |   | 1 |    | 3  |    | 3  |    | 1 |   |   |   |
|   |   |   | 1 |   | 4  |    | 6  |    | 4  |   | 1 |   |   |
|   |   | 1 |   | 5 |    | 10 |    | 10 |    | 5 |   | 1 |   |
|   | 1 |   | 6 |   | 15 |    | 20 |    | 15 |   | 6 |   | 1 |
:::

The trick is to remove the odd and even classes from tr elements inside tables that have a class added. That way the table escapes modification by this line:

https://github.com/quarto-dev/quarto-cli/blob/5ad49f1/src/format/html/format-html-bootstrap.ts#L308

However, then the table has a style attribute added by Pandoc that defeats the styling. Ordinarily it is removed by that postprocessor but now I need to do it myself.

[jkseppan]

No, that doesn't work - I must have been running a modified version of Quarto when trying that out, since I was also trying to prove to myself that it is that code that is adding the class. The odd class is added by Pandoc's HTML writer, and I don't think there is any option to override it from Quarto.