O Table Wrap: Overflow Scroll (Extra) | TACC UI Pattern Library

Content: /* This CSS is EXAMPLE code for a client. It is NOT part of the pattern. */ /* Prevent Text Wrap */ /* NOTE: If multiple lines are okay, do not use ruleset */ .o-table-wrap--overflow-hidden table { white-space : nowrap; }
URL: /components/raw/o-table-wrap/example.overflow-hidden.css
Filesystem Path: src/lib/_imports/objects/o-table-wrap/example.overflow-hidden.css
Size: 224 Bytes

Make table overflow scrollable (advanced demo).

?⃝ Explanation

A <table> can not scroll its content. The trick is to wrap it in a <div> and scroll the <div>.

ⓘ Notice

This class can only be used on a table wrapper. It has no affect when used on table directly.