Author avatar

Vivek Kumar

Creating Fixed Floating Elements Inside Table Cell on Mobile

Vivek Kumar

  • Jun 18, 2019
  • 8 Min read
  • 19 Views
  • Jun 18, 2019
  • 8 Min read
  • 19 Views
Web Development
React

Introduction

While creating the design and the features, as per the needs and the demands of smartphone users, there are multiple aspects that are required to be taken into account. The designs and features need to be seamless, customizable, and, above all, responsive. With the changing trends in mobile designing and app usage, there are multiple dimensions that are frequently added that make the job of mobile programming developers challenging. One such dimension of seamless mobile operation is to make the data tables responsive to the mobile design.

In the world of programming, especially the mobile application interface, the developers usually have issues with the datatables not rendering adequate performance to a responsive design. Some of the usual challenges comprise of the width of the data table, arranging a single row of data without compromising the alignment of the table, etc. In general sense, a dedicated programmer may try to flex the table width but it is a tough call, as it might put the contents of the cells in an uncomfortable position as the borders cannot narrow any further.

In this guide, our prime objective is to learn how to create floating elements inside a table cell that works upon the mobile program interface in the simplest way possible. We will learn about their appearance on a demonstrative mobile screen as well as the code enabling us to make the necessary adjustments.

Understanding the Crux of a Responsive Design

The basic part played by a successful responsive design is to adjust the designs in order to accommodate the screens of various shapes and sizes. So, can you guess what will happen if the screen of a mobile phone is narrower than the least width offered to the data table? As a user, you can simply zoom out and observe the entire table, but the size of the text will be too small for you to be able to read. Instead, one option that you can choose is zooming up to the point where it is possible for you to read the text, but to browse the table it requires both horizontal as well as vertical scrolling.

You can find the situation mentioned above, demonstrated in the image below:

Imgur

How to Tackle the Irregularity?

In order to fetch a solution out of this problem, we are going to apply the CSS ‘responsive design’ principles to find out whether the screen is actually smaller, in comparison to the maximum capacity of the table, or not. If it is smaller, then the step to reformat the table would become inevitable.

In order to do the same, we are going to stick with the basics and apply Plain Ol’ Semantic type Mark-up for the creation of our table. One of the examples demonstrating the case in the form of code is illustrated below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table >
	<thead >
	<tr >
		<th > First Name </ th>
		<th > Last Name </ th>
		<th > Job Title </ th>
	</ tr>
	</ thead>
	<tbody >
	<tr >
		<td > James </ td>
		<td > Matman </ td>
		<td > Chief Sandwich Eater </ td>
	</ tr>
	<tr >
		<td > The </ td>
		<td > Tick </ td>
		<td > Crimefighter Sorta </ td>
	</ tr>
	</ tbody>
</ table>
html

If we consider coding in regular CSS, then there is nothing in particular which is required to be done, as shown:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}
css

Here, the small screen responsive factor will play its part. By the process that we have followed, we have already reached the minimum table size width, approximately 760px, hence we will set up the media query in accordance with the specified width. We will also consider this measurement as a standard because, apart from the standard screen size of a smartphone, it is also compatible with the resolution of iPads.

One of the considerable key changes that we are going to enforce is ‘to compel the table not to act like a table’. Basically, it is done by setting all the table-related components to be of the block level. Thereafter, by observing the zebra striping that we originally included, it would look like each and every table row will act like a table in its own form. But here, the condition is that, in terms of width, it will be as identical as the screen.

The best part of the entire process is that there is no additional horizontal scroll required to be done. What a sigh of relief! Don’t you think?

After successfully accomplishing this step, we will apply CSS generated content for each type of cell. This helps in the application of labels which will help us know what each and every bit of data actually indicates.

In CSS, it is performed in the following manner:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Secret Alias"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
css

It is worth mentioning that the desktops will also acquire the standard table experience. The mobiles, and other similar types of small screens, will be reformatted and seamless in terms of exploring the table.

How Will It Look in IE?

With Internet Explorer (IE) 9, and every downgrade version, there is always a problem with setting up the table elements as a form of display: block;. It acts in an odd way and the approach doesn’t seem to work right. But the good thing with Internet Explorer (IE) 9 is that it does support media queries.

Hence, the ideal solution here would be to simply wrap up the media query styles in terms of conditional comments.

1
2
3
4
5
6
<!--[if !IE]><!-->
<style >
   /* table-related media query stuff only */
</ style>
/* Or an external stylesheet or whatever */
<!--<![endif]-->
html

If we take this situation while using Internet Explorer (IE) 10 then the case will simply work and, the best part is,it also overlooks conditional comments. So even if it is wrapped in, the styles will work in proper order.

Conclusion

In this guide, you've learned a solution to handle the elements in the table cell for mobile phones. Though it may not be an ideal solution, it is certainly a potential solution to challenges faced by the data tables displayed over small screens. It is critical to understand that there may, or may not, be a few accessibility issues; there are certain upmarket JavaScript solutions which deal with these things in a different manner, yet render quality results.

References

While writing this guide, the following resource has been referred to:

0