Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The table-responsive class makes tables horizontally scrollable on smaller screens to ensure the entire table is visible without the need for zooming or horizontal scrolling.

Info

A table should only be wrapped by a registered parent div element in CKEditor5 such as div.table-responsive. Any other wrapper will break the table toolbar in the CKEditor5 view. For a new table div wrapper, please reach out to Drupal ITS for further enhancements.

Code Block
<div class="table-responsive">
  <table class="table" data-responsive="enabled">
    <!-- Your table content goes here -->
  </table>
</div>
Info

These Bootstrap table styles can be used individually or combined as needed to enhance the presentation of tabular data in your web application. Additionally, you can customize these styles further by using custom CSS to achieve the desired look and feel for your tables while maintaining responsiveness and consistency.