How to make a table with a horizontal scrollbar under the header?

Question

css

Let's pretend we have a table. Between the header and the body there is a scrollbar, by dragging which we scroll both the header and the body of the table, which go into overflow horizontally, since they are longer in size than the parent component. I've been struggling with this issue for a long time, can anyone help?

Answer 1

And some simple CSS like

-webkit-overflow-scrolling: touch;
    overflow: auto;
    overflow-y: hidden;
    max-width: 100%;

Won't fit?