Bootstrap style classes with a listing table

[dasayan05]

Description

I am new to quarto. I have a simple listing (table) on a page.

---
title: ...
listing:
  -
    id: index-news
    type: table
    contents: news.yml
    ....  
---

::: {#index-news}
:::

I would like to add styling on the listing table with bootstrap classes as explained here (and works with normal tables). I thought doing this would work

::: {#index-news .striped .hover}
:::

.. but it doesn't. Am I doing it wrong ?

[cscheid]

The listing table is not considered a "Quarto table" for the purposes of styling (perhaps it should, but we need to figure out if that would cause other problems). I don't think Quarto has any built-in support for styling listing tables, but you can try to identify the HTML elements using your browser's developer tools, and then writing some custom CSS. You'll need to be familiar with HTML and CSS to do that, though.

[mcanouil]

As suggested, the way to do is (S)CSS. There are various discussions describing this.

Note that you still need to understand how CSS works, especially the inheritance concept when you add a class to a div, in your case the listings.

[dasayan05]

In case anyone looking for the exact solution, I managed to get it done by adding the following to a custom scss file

.quarto-listing-table {
    @extend .table-striped !optional;
}

Thanks @cscheid and @mcanouil for their suggestion.