Changing Column width of a table view (Drupal 7 Views 3)

Question

I have a view with 4 columns. The first column, which contains a majority of the text is taking about about 80% of the width of the form and forcing the 2nd, 3rd, and 4th rows to wrap. Problem is those columns have content that should not really be wrapped for exmaple Tues 3pm - 5pm ends up looking like

Tues

3pm -

5pm

So rather than the columns adjust based on content, I'd like to manually set the width of the first column so that it leaves enough space for the others. Or if need be manually set all the column widths.

Please understand I am totally lost in drupal and only have a small amount of css/php knowledge so please be as absolutely descriptive as possible. I've found a bunch of examples in other areas but people have left out huge chunks of the code, or where it's supposed to go etc. One place kept says "make changes to the css", not sure if it's normal but I have about 25 different css files in my drupal install, I had no idea WHAT css to make the change in.

Thanks in advance for any help! This is a great community and I'm happy I went with Drupal because of it.

Answer 1

A more general approach than useful answers from @Michael Greisman @Neograph734 is to create some utility CSS classes that can be deployed on any View. That means if this requirement comes up when creating a new View, you already have a solution ready to deploy.

This is something that has been really helpful on a site where I have configuration responsibility but all template / CSS work is done by a contracted developer (who suggested this approach).

1. Create some CSS classes that can be used to fix column widths. In our case, using % values worked best, but do whatever makes sense for your site. Example:

   .fix-width-20 {
   width: 20%;
   }
   .fix-width-40 {
   width: 40%;
   }
   .fix-width-50 {
   width: 50%;
   }
   

2. On a view with the table format, go to the 'Style settings' for the Field that is populating the column (or columns) where you want precise control of column width. Add the name of the CSS class that fixes the width. Example:

Answer 2

Oke, you will need to do two things. First thing is to find out what name was given to the first column. Views will name (almost) everything it creates.

Open the page with the table, and then right click the table and choose 'inspect element' (this migth depend on your webbrowser, you can also view the source code).

You will find some HTML like below:

<table class="views-table cols-4">
 <thead>
  <tbody>
   <tr class="odd views-row-first">
    <td class="views-field views-field-title">
    <td class="views-field views-field-uid">
    <td class="views-field views-field-body">
    <td class="views-field views-field-custom">
   </tr>
   <tr class="even">
    <td class="views-field views-field-title">
    <td class="views-field views-field-uid">
    ...

As you can see, each first field is called views-field-title (basically the name of the first field).

In your css, you can set a width by writing something like this:

.views-field-title {
  width: 60%;
}

The best place to put this, is a difficult question. The best way would be to write a custom module that uses drupal_add_css function to add a css file to the page. However it is quite a hard way for 3 lines of code.

For this case I think adding it to the bottom of your theme's css will work just as good (if you update your theme, you might have to add it again though). Also if you have users who can choose different themes, make sure to add it to all of them.

Answer 3

@TheMad-Hatter, the earlier advice you got was correct; this is a styling issue, to be fixed using CSS. There are (of course) several ways to go about it, but the easiest is to change the style sheet for your theme.

If you can't tell which stylesheet to correct, change style.css. If that gets overridden by other style rules (that is, you know you did it right, you've cleared the caches, but still don't see the change)... then I'm sorry to be blunt, but you're going to have to learn enough CSS to deal with it. However, it's guaranteed to be worth the time.

• The quick way is to change the style.css file in your theme.
• The more correct way is to make a child theme (if you don't already have one)
  and change the style.css file in that. That way, you can apply updates to your parent theme without losing this addition.

CSS solutions:

You can style the width of the first column, perhaps like this:

.this-view table td:first-child {
  width: 55%;
}

However, that won't necessarily protect columns 2-4 from wrapping, so you might want to use this instead:

.this-view table td {
  /* initially set all columns to not wrap */
  white-space: nowrap;
}
.this-view table td:first-child {
  /* then set the first column to wrap normally */
  white-space: normal;
}

Oh, and the 25 stylesheets are normal. That is a whole different set of headaches.

Answer 4

white-space: nowrap;

/* Adding the white-space:nowrap worked like a charm for the tables, did not need to add the width options.

Thanks Michael Greisman

Answer 5

• Simple solution;
  • go to your CSS folder located under your subthemme
  • find a file called tables.css
  • locate code table.cols-4 {..... width: 200px; } CHANGE width: 200px; for width: 100%;
  • flush css caches.