5

I have a views table block within a panel.

The table is overflowing the panel and I am trying to understand how to constrain it. I have tried setting it's CSS to various widths but they are always ignored. I can change individual column widths, colours etc but not the width.

Do views tables ignore these settings and just display to the width of their content? What is the best way to set their width?

Any tips for using views tables in responsive themes(within panels)?

I'm using Drupal 7.23 , Views 7.37 , Panels 7.33 , Omega-4

Update: In my CSS for this table I have previously tried setting table { width: 100%; (and with !important). I know it is being applied to the table as when I have very colums it increase the width of the whole table to 100% of it's panel.

The problem occurs when there are a lot of columns and the content text of the column is wide. Then the table overflows past 100%. I can make it thinner by changing font size but I am trying to understand how the views table width is set.

In terms of Views table plugins / modules I am looking at FooTable , Responsive Tables and (sandbox) Better Views Tables. None of these are mature modules so I am quite nervous about using them.

Improve this question
2
  • Responsive tables is working great for me. Using it now in production in extranet. And the future for it looks good as it is a backport from core Drupal 8.
    – Kari Kääriäinen
    Commented Oct 31, 2013 at 8:33
  • There might be lots of things affecting table's width. Can you provide a link that we can see your table and inspect your HTML output?
    – ErgunK
    Commented Nov 9, 2013 at 20:56

3 Answers 3

Reset to default
3

Set the table width to 100% with css. If some other rule is overriding this, you may have to increase the specificity or add !important.

If you need more control of your table columns, there is a cool module for responsive tables: https://drupal.org/project/responsive_tables. Haven't yet tried it myself.

Improve this answer
2
  • thank you for this comment. I have updated the question with your suggestion. Tables containing wide columns often overflow past 100% width.
    – Taylor Taff
    Commented Oct 29, 2013 at 14:45
  • Also this might be useful: Why does overflow:hidden not work in a <td>? stackoverflow.com/questions/509711/….
    – Kari Kääriäinen
    Commented Oct 29, 2013 at 19:29
2

Have a look at the Views Responsive Grid module, with close to 20K reported installs, and an official D7 version, which IMO is pretty 'mature'.

Here is a quote about it (from its project page):

... provides a views plugin for displaying content in a responsive (mobile friendly) grid layout. Rather than trying to force the standard Views grid display to work for mobile this provides the same functionality, but in DIVs instead of tables. Provided is also the ability to specify a horizontal or vertical grid layout which will properly stack the content on a mobile display.

Features:

  • Horizontal or vertical grid layouts
  • Custom classes for use with responsive themes
Improve this answer
0

I've had good success with the Responsive Tables Filter module. It's a mature module with both 7 and 8 versions. It automatically makes Views tables responsive, and also makes tables inserted with a WYSIWYG editor responsive, a huge plus for the site I needed it for. It uses the Tablesaw method for responsive tables.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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