Wrap tabular data in table-container (horizontal scroll on narrow screens) and a semantic <table class="table">. Modifiers: is-fullwidth, is-striped, is-hoverable, is-narrow.
Semantics first
- Use
<thead>,<tbody>, and<th scope="col">for real data grids. - Status columns pair well with
tagcomponents instead of color-only cells. - Action cells:
button is-small is-linkor text links—keep one primary action per row.
Important interview questions and answers
- Q: Why table-container?
A: It enables overflow scrolling so wide admin tables do not break mobile layouts. - Q: Bulma table vs raw HTML table CSS?
A: Bulma applies consistent padding, borders, and hover states; you still own accessible structure and meaningful headers.
Self-check
- Which modifier adds zebra striping?
- What wrapper prevents horizontal page scroll on small viewports?