Formatting Tables for Mobile Display

From TNG_Wiki
Jump to: navigation, search

For TNG generated pages, you can use the Responsive Tables mod in TNG V10.1+ to handle tables on mobile devices.

For user created pages, you can create CSS definitions in your template/css/mytngstyle.css as well as make changes to HTML table code in the user created page so the tables will either stack or fold and display correctly on smart phones.

The following are a couple of approaches I used on my site in my user created pages.

Stacking Columns

See Stacking Columns for an example on how to make content stack

I added class="block" to the table definition in the Roy Family page so the two column display would display as one column stack over the other on my Galaxy S5 Android phone.

    <thead>
        <tr>
	   <th class="block" valign="top"><span class="header"><strong><a href="extrastree.php?personID=I40&amp;tree=T0001&amp;showall=1&amp;generations=5">Maxime Roy's Family</a></strong></span></th>
	</tr>
    </thead>

and added the following CSS definitions to my template mytngstyle.css

table th {
  margin:0 !important; padding:0 !important; vertical-align:top; font-weight:normal; }
@media only screen and (max-width: 640px) {
*[class].block { display:block !important; }
}

Folding Columns Into Rows

See tables columns into rows for an approach that can be used in user created pages so the tables columns will fold into rows and display correctly on smart phones.

In order to prevent the css from impacting the individual getperson.php page, you will have to associate the css statements shown in the above links to a specific <div id= > by wrapping the <table> in a div, such as

<div id="rowdisplay">

As shown below the css statement from the Stack Overflow post was reformatted to specify a div ID of rowdisplay in my Ancient Provinces page so that the columns get displayed as rows when view on the smart phone in landscape orientation.

/* styles added to get table columns to stack  */
	@media only screen and (max-width: 40em) {
	
		#rowdisplay thead  #rowdisplay th :not(:first-child) {
			display: none;
		}

		#rowdisplay td, #rowdisplay  th  {
			display: block;
		}

		#rowdisplay td[data-th]:before  {
			content: attr(data-th);
		}
	}

Related Links

Tuning for Mobile Display

Tuning for Tablet Display

Responsive Tables