At my work recently I was helping a webshop that lost a developer, attempting to keep projects afloat while they hire a replacement. This involves completing projects that were already near completion. 1 such example was to move a weekly Soup guide from campus food vendors into the new responsive drupal site which is using Bootstrap. The provided an interesting challenge because tables are difficult to make responsive.

The Problem

The legacy website has between six or eight weeks of soup menus. The legacy website shows the user a weekly menu as follows:

This weekly selection of dates takes the user to a Weekly soup menu.

Weekly options of dietary menu.

Note that this menu this is at a minimum a 5×5 matrix. Every day of the week is shown and every day of the week has 5 dietary menu options of: Vegetarian, Non-Vegetarian, Salad option and Fatir dietary restrictions.

This looks fine on a nice large desktop, but how will this information render on smaller screens?

My Proposed Solution

After quite a bit of research I settled upon a solution using some Javascript and CSS to make the table (column) widths responsive. Basically I want to provide sane options to the table shows on lower resolutions while assuring the table layout fits to accomodate the number of columns shown.

For example originally I had created a CSS rule of:

 td:not(.day) { width: 25%; }

To say that the non-day columns should be 25% wide. But, as columns are hidden on the table — it begins to look very ugly! Haha.

So this simply display rule would not suffice. Ultimately I settled on this elegant solution I found on Stackoverflow:

    td.day {
    	font-family: "Open Sans", Arial, sans-serif;
    	background-color: #D2E9FF;
    	text-transform: uppercase;
    	text-align: left;
    	padding: 0 5px 0 5px;
    	vertical-align: inherit;
    	width: 7em;
    }

    /* These are the 3 rules I want to show */
    tbody > tr > td:not(.day):nth-last-child(2) ~ * {
    	width: 50%;
    }
    tbody > tr > td:not(.day):nth-last-child(3) ~ * {
    	width: 33.3%;
    }
    tbody > tr > td:not(.day):nth-last-child(4) ~ * {
    	width: 25%;
    }
    td {
    	border-top: 1px solid @brand-secondary ;
    }
    tr:last-child {
    	border-bottom: 1px solid @brand-secondary;
    }

With this rule generic rule, tbody > tr > td:nth-last-child(N) ~ * , we can say for the non-day columns:

• if there are 2 columns make them 50% wide
• If there are 3 columns make them 33% wide
• If there are 4 or more columns make them 25% wide.

So using these CSS rules our table looks nice as Javascript changes the number of visible columns from the user selection.

Examples of Final output of CSS Affecting Table

Example of table with 4 columns

Example menu table with 3 columns visible

Example menu with 2 columns visible.

Example menu with 1 column visible.

I was pleased with this solution for the client and I found it to be a nice example of a relatively complex CSS example with many conditions. I hope you can see how CSS can be very powerful when properly utilized! In the above examples Javascript code would load the table with N visible columns depending on the current devices viewport size. Optional tweaks to be offered is remember a visitor’s preference of the table based on a previous cookie value, and limiting the minimum number of columns to be shown to say 2.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!