Tables can quickly be styled by simply using the .table-stylish class.
However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.
Therefore, the .o-hidden is automatically applied to the table itself.
A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
| Head 1 | Head 2 |
|---|---|
| Cell 1.1 | Cell 1.2 |
| Cell 2.1 | Cell 2.2 |
table.table-stylish.table-p-s.border.r-l
thead>tr>th*2
tbody>tr*2>td*2
Scrollable tables can be obtained by combining the overflow utility classes and the .table-no-wrap class to prevent cell from collapsing before scrolling.
This special class can be applied to the following elements:
table,
thead,
tbody,
tr,
th,
td
In turn, every td element under one of these elements will no longer wrap text.
| Table without the .table-no-wrap class |
|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque. In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula. Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl. In hac habitasse platea dictumst. Integer non libero tempor, sollicitudin lorem vitae, auctor arcu. |
| Table with the .table-no-wrap class |
|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque. In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula. Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl. In hac habitasse platea dictumst. Integer non libero tempor, sollicitudin lorem vitae, auctor arcu. |
div.w-full.ox-scroll
table.table-stylish.table-p-s.border.r-l.table-no-wrap
thead>tr>th*2
tbody>tr*2>td*2