How to add wrapping elements & classes to a table in a view?

Question

I'm building a custom theme using bootstrap 3, I need responsive tables. Yes, I'm aware of responsive_tables but I didn't like it. I want to use bootstrap's native .table-responsive. for that I need to wrap table like this:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

I need to add couple more classes to the <table> element.

How to do that?

Answer 1

You can add css class to the whole view (go to your view edit page -> Advanced -> Other -> Css Class). It will print something like this:

<div class="view view-test view-id-test view-display-id-page table-responsive view-dom-id-47b9f610df77a3f6181e64ca36b9881e">
  <div class="view-content">
    <table class="views-table cols-2">
       ...
    </table>
  </div>
</div>

In views UI there is no option to add class to <table> element, but you can create/copy a template file (e.g. views-view-table.tpl.php, you can copy it from views module, look in "Theme information" in your view for more specific details) in your theme, clear caches and edit it as you wish.