tables

Styling Drupal Table Columns

Tables can be a pain. And they can be quite a bit of pain when they are used in Drupal. I used Advanced Forum and am pretty happy with it. But there are some margin issues that really don’t seem to lend themselves to easy fixing via CSS.

I need to expand the Forum Title Column. To do this easily and effectively in Drupal, I choose the corresponding column header and expand that. This will also expand the entre

column below. Look to the examples that are illuminated in yellow. This makes it much easier to add space to an area that needs it, like a title while leaving a # visits smaller.

Mobile Development and Tables in Drupal

Drupal uses Tables for its Forums. Tables don’t get a lot of respect in this day and age but they are still useful for many things. And Forum/Bulletin posting sites are one of them.

So I am trying to make the tables fit on a 320px width screen. Not easy. After playing around with several different CSS settings, I discovered that using

table-layout: fixed;

really seemed to help me. I had been shrinking the fonts to make the tables fit, with mixed results. Using the fixed setting helped.

Create a Gallery to Present groups of HTML objects

I need to be able to display a bunch of books that are on sale from Amazon that interest the site’s audience. Amazon’s Associate Program makes it easy to monetize your site by advertising their stuff. And since the product (if placed properly) can be a value add to your clients, it is a win win.

In the SS, you can see the book ads from Amazon. Each one of these ads is a small node from a custom content type

called Ads-Books. This type is nothing more than a piece of full, unfiltered HTML that allows you to create any kind of node that you want to. I have created buttons, help graphics, all sorts of things using these types of nodes. And by using Panels and CSS, they are easy to style and place.

The View uses the Grid display. This uses <TR> and <TD> tags so the tables are added easy and don’t require much in the way of styling. I know, TABLES… but they still have their uses at times.

In addition to the Grid display, I added three pieces of CSS to make things fit together properly:
.book-ads-cell-class > p {width: 25px; /* helps align indiv cells*/}

.panel-pane.pane-views.pane-all-books.no-title.block {left: -8px; position: relative; /* moves the whole panel pane content around inside the table rows/cells*/}

.book-ads-cell-class { /* more help for cells*/
position: relative;
left: -33px;
top: 23px;
}

the other SS shows what one of the individual book nodes looks like in code within CKEditor.

the nice thing about this view is that it is maintenance free. As long as I add book ads to that content type, they will appear properly in the view.