HTML output: is there a native way to add a horizontal scrollbar for very large markdown table?

[aborruso]

Hi,
I have a large table: is there a native way to add a horizontal scrollbar for very large markdown table?

Thank you

[mcanouil]

Hi,

yes, using HTML/CSS.
For a more detailed answer, could you provide a small working reproducible example.

[aborruso]

@mcanouil first of all thank you very much for what you do to share great Quarto contents. You are often my lighthouse in the night!

I know, I can do all with HTML and CSS, also not use quarto :)
But I explained myself badly.

As "native" I wanted to mean: is there already something ready? In example some CSS class to apply (i.e. .table-wrapper)??

Moreover the default classes of tables generated by code, they seem better to me, the tables are more beautiful and readable. They use table-sm and table-striped classes.

Moreover I have tried to use :::{.table-sm .table-striped} for my markdown table, ma this seems not to work.

Then there is not a ready way to do it. I think it would be convenient to have a class to apply horizontal and vertical scrolling (after a limit of rows).

For my table I'm using this

.table-wrapper {
  overflow-x: scroll;
  font-size: 13px;
}

.even {background: #f2f2f2}
.odd {background: #FFF}

Thank you

[mcanouil]

You are welcome and than your for this feedback/compliment! 😉

Since Quarto uses Bootstrap, everything in it (or almost) is available to you.
On top of that there are some .quarto-* CSS classes, but not sure those will help you.
There some "overflow" classes: https://quarto.org/docs/authoring/article-layout.html#overflowing-content

To note for "epub" format, Quarto defines:

.cell-output-display {
  overflow-x: scroll;
}

[cderv]

Leveraging Bootstrap feature getbootstrap.com/docs/4.0/content/tables/#responsive-tables you can wrap your table in a div with .table-responsive class.

Example at : #4942 (comment)

[aborruso]

Thank you @cderv I know because I had also opened an issue about it, which was excellently resolved.

[cderv]

Awesome ! thanks for the back references!