Add a horizontal scrollbar to an HTML table

by

First, make a display: block of your table

then, set overflow-x: to auto.

table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

Nice and clean. No superfluous formatting.

Here are more involved examples with scrolling table captions from a page on my website.

If an issue is taken about cells not filling the entire table, append the following additional CSS code:

table tbody {
    display: table;
    width: 100%;
}

More Related Contents:

  1. with fixed and scrollable [duplicate]
  2. Set cellpadding and cellspacing in CSS?
  3. Word-wrap in an HTML table
  4. Table fixed header and scrollable body
  5. How to deal with page breaks when printing a large HTML table
  6. HTML/CSS: Making two floating divs the same height
  7. Make a div fill the height of the remaining screen space
  8. Fixed header table with horizontal scrollbar and vertical scrollbar on
  9. Add border-bottom to table row
  10. How to remove unwanted space between rows and columns in table?
  11. How to make Scrollable Table with fixed headers using CSS [duplicate]
  12. How can I set the max-width of a table cell using percentages?
  13. Wrap text in tag
  14. Rounded table corners CSS only
  15. using text-align center in colgroup
  16. overflow:scroll; in
  17. How can I apply a border only inside a table?
  18. Linethrough/strikethrough a whole HTML table row
  19. Equivalent to float in Outlook
  20. Why is box-sizing acting different on table vs div?
  21. Table overflowing outside of div
  22. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  23. Border around tr element doesn’t show?
  24. How to completely remove borders from HTML table
  25. Apply Border-Radius To Scrollbars with CSS
  26. Should Tables be avoided in HTML at any cost?
  27. CSS: display:block; vs display:table;
  28. Styling the last td in a table with css
  29. How to get horizontal scroll bar in select box in IE?
  30. How to make a table with equal column widths in CSS?

Leave a Comment