How can I write a cell, or multiple cells, code and markdown as needed, that create a table with a .table-responsive div?

[harlananelson]

Quarto:

I am using jupyter notebooks with python and am creating Quarto Slides.

This is the use case: even if this use case can be better solved in a different way, I still want to know how to use divs.
I am displaying a small pandas data table called datatable. It has too many columns to fit without scrolling.
Using a div I should be able to get the table to display with scroll bars. Currently the columns just get cut off..

How can I
write a cell, or multiple cells, code and markdown as needed, that create a table with a .table-responsive div? Does everything
belong in a single code cell? Do I surround the code cell with markdown cells with div coding ::{.table-responsive}?

I did try the below all in a code cell.

#|include: true
:::{.table-responsive}
.table-responsive
HTML(datatable)
:::

[mcanouil]

You can add CSS classes directly in your code cell using classes, see https://quarto.org/docs/reference/cells/cells-jupyter.html#attributes.