Usability and visual appeal are necessary in user interfaces to facilitate and ease the usage process. Taking the following dummy table as an example:

ID	First Name	Middle Name	Last Name	Home Phone	Office Phone	Mobile Phone	Position	Department	Office	Salary	Country of Origin	Marital Status
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married
AM7309	Andrew	Michael	San-Diego	555-2873	567-1234	088-0102	Application Developer	Innovation Services	UK HQ	20,000$	United States of America	Married

 

It shows that having several data rows can increase the page's vertical size and look visually unappealing and inadequate, especially for scenarios where for example footers and/or controls are located at the bottom. This thus urges the user scrolling down to reach such information and controls. The same can be said if more columns are needed, which will cause the same problem as data rows but on a horizontal perspective. The first technique is to reduce the visual size of the table, making it compact:

Compact Table. Code Source: http://jsfiddle.net/335ob1en/2/

 

With the help of CSS, we reduced the table size to be compact and scrollable in itself, without the need to scroll through the entire web page. However, if we scroll down inside the table, the header is no longer visible and thus users scroll back up to identify the exact column (Memory retention issue). This is evident in the phone number fields as it wouldn't be clear which number is home or office if the user does not remember:

Header Disappears

 

As a result, the header ought to be fixed, or in other words moves as the table is scrolled horizontally or vertically.