How does css table make each piece of data have a horizontal scroll bar?

<div overflow="auto">
  <table>
     <tbody>
        <tr>
           <td>xx</td>
           <td>oo</td>
           ...
        </tr>
     </tbody>
  </table>
</div>

my scenario is that table has a lot of data to display and cannot wrap lines, so table can only use horizontal scroll bars.
because there is too much data, you have to pull it to the bottom every time to slide the scroll bar. Now you need to add a scroll bar to each piece of data. Is there any good way to achieve it?

-
Thank you

Css html front-end

Mar.15,2021

add overflow-x:auto to tr, but I've never seen a website do this. It should be very ugly.
your direction should be to control the outer scrolling of the table, that is, to add height to the table, and when scrolling vertically, there is no problem of dragging data to the bottom
in short, the horizontal and vertical of the outer table have to add their own scroll bars

wrap a layer of div, outside the table and then set the horizontal scroll bar on this div.
the width of table should not be set dead. The width of the
div is set to the width you need for your layout.

personally I think adding a horizontal scroll bar to each piece of data can consider overflow, but it's ugly.
consider that the height of table is set in the visible height range of the window, so that it is not too troublesome to drag the scroll bar up and down.
for example, if the browser window height is assumed to be 700, then within the range of the table height setting, a window can see the entire table, scrolling up and down and horizontally within the table, and the experience should be better than each horizontal scrolling.

Previous: What is the principle of the vertical center of the css?

Next: There is no registration function. The backend creates a batch of accounts and provides a test account to app store,. Can it be approved?

How does the I'mQQ site automatically increase the width of some elements when the page shrinks?
For the page, see https: im.qq.com download . for example, the an in the upper left corner (the initial width is 36px when you zoom 67% in the home), Chrome browser, and then it starts to widen to 96px under 25%, but the width does not change when ...

Javascript css html front-end

Mar.22,2021