2

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?

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.

  • Will views-view-table.tpl.php work? How did you arrive at this template file? – claws Feb 27 '14 at 10:02
  • 2
    In you view edit page go to Advanced -> Other -> Theme: Information and you will see all the suggestions, what template files you can use for your view. After copy you need also to clear cache. – Saulius Feb 27 '14 at 10:09
  • Adding the css the advanced->other-css class way did not work for me. It did not put it close enough to the table. It seems to be needed right in <div class="view-content"> area for it to work... ie <div class="view-content table-responsive... – jasonflaherty Apr 14 '14 at 21:06
  • For convenience, the default place to find the base file to use for your template is /sites/all/modules/views/theme/views-view-table.tpl.php – user56reinstatemonica8 May 10 '16 at 11:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.