How do I put a div around table with class = table-responsive?

Question

I want to put a div around tables in general and give them the class table-responsible. Therefore I changed the table.html.twig in my theme like this:

<div {{attributes.addClass('table-responsive') }}>
  <table{{ attributes.addClass('table') }}>
    ...
  </table>
</div>

But if I create a table in CKEditor nothing happend. It's only an ordinary table and nothing changed.

What did I do wrong?

Answer 1

CKEditor generates the table on its own. You can see this, if you switch to source. So the changes in twig will have no effekt, because the theme layer doesn't touch the source code that is coming out of the ckeditor. Only the filter layer is checking the source. More for security reasons. But it would be possible to change the table here, if you want to do it in drupal. Or you can modify the configuration of ckeditor itself.

Answer 2

To solve this you can implement a custom filter to surround the table with the needed div.

In Drupal 8 you can write a filter this way: https://www.lullabot.com/articles/creating-a-custom-filter-in-drupal-8

Or use hook_filter_info() for Drupal 7: https://api.drupal.org/api/drupal/modules%21filter%21filter.api.php/function/hook_filter_info/7.x