add css class to table?

[madebyafox]

Loving Quarto!!

Q: I see I can specify css classes and styles to divs and imgs added through the Visual Editor... but I'm not seeing this options for tables. Am I missing this somewhere?

(use case) I have a number of markdown tables used to organize images in columns, and want to set column widths for different 'types' of tables using css.

Thanks!

[jjallaire]

We don't currently have a way to set classes on tables however we do have a way to set explicit column widths (see https://quarto.org/docs/authoring/tables.html#column-widths)

[cscheid]

Oh, I think I have a typo. I wrote that on the go, didn't test it:

    elseif tbl.caption.short ~= nil then
      -- this won't match { .classes } or {.class1 .class2}
      -- it only matches {.class}, {.class1.class2}, etc. NO spaces!
      which = find_text_content(tbl.caption.long) -- THIS SHOULD BE ".short"
      if which == nil then
        return nil
      end

[AlFontal]

Hi @cscheid!

Thanks a lot for this.

I fixed that typo, then I was still getting the error:

Error running test_filter.lua:
test_filter.lua:28: attempt to index a nil value (local 'node')

So, kind of blindly, assumed that the error came from exactly what the error says, indexing the node variable without previously checking if it was nil. So basically, I added this clause at the very beginning of the find_text_context function definition:

function Table(tbl)
  local function find_text_content(node)
    if node == nil then
        return nil
    end
   ...

This now works, and classes written in the caption are injected into the <table> element. However, since it's of course a caption, it is printed, which becomes rather annoying when it's just a string full of subclasses. Since this is just a hacky solution I defined an extra class .hide-caption so that in styles.css I define:

table.hide-caption  caption {
    display: none;
}

This seems to work to hide the caption. Of course it's problematic if you actually want to show the caption, but I guess a more elaborate lua filter might do the trick!

In any case, I know I might now be pushing it too far when this was just supposed to be a hacky trick to get over the limitation at this point, but a new issue arises:
Whenever a link is included in the table, the filter stops working, and no class is injected at all.

See:

<!-- No link -->
| A | B | C |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| a | b | c |
| d | e | f |
: {.table-striped.table-hover.hide-caption}

<!-- Link -->

| A | B | C |
|---|---|---|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
| a | b | c |
| [d](https://quarto.org) | e | f |
: {.table-striped.table-hover.hide-caption}

Any ideas on what might be causing the filter to break when a link is present in the table's text?

Thanks! And I completely understand if this is a non-priority.

[AlFontal]

Small update: html style links do work. It's only markdown style [text](url) that seems to break it.

[cscheid]

@AlFontal Yes. I should have clarified that my solution was truly a hack. We have a better fix coming up in the near-to-medium term (cc @rich-iannone). At present, if you need full markdown rendering, you'll need to learn your way around Lua filters. In this case, you'll need https://pandoc.org/lua-filters.html#pandoc.read

[AlFontal]

Yes, understood! The hacky solution works well enough for my use-case now, and I ended up learning quite a bit about lua-filters! really looking forward the next releases, so many features coming up!

Thanks for the great work guys!