Creating HTML table with a fixed column/s

     I want to write about Front End today. User Friendly User Interface is a key for a successful project. You might create the greatest Database structure/model, or you might have the best bug free, fast code running in your web server. Guess what, your users do not really care about how many joins, tables, database engine version you have in your database. They don't care about what programming language you use either. They care what they see on their screen which is the Front-End of your application. Your User Interface will determine if your project will be a success or fail. Your User Interface is the salesman of your project. Don't fill your User Interfaces with all gray grids, or CSS, JavaScript frameworks. It's not that difficult to learn CSS, HTML and JavaScript to create custom User Interfaces for your users.

     HTML Tables are used to list data in web applications. In these days, data is getting larger and larger. Sometimes data you need to display on a table can have too many columns and columns might not fit to user’s screen. When you have too many columns, you might need to have a scroll bar for users to scroll left to right. I can live with a vertical scroll bar but when you have a scroll bar in the bottom of a table, your page turns into an Excel worksheet. As a user, I don't like horizontal scroll bars. Main reason is, usually first column displays the key of the data, and you always want to see that on your screen. When user starts to scroll right, data becomes useless if you don't see the key column.

     In this post, I want to show you a way to keep the key column on the screen when user starts scroll horizontally. Let me introduce you the CSS position:sticky rule. By using this rule, you can keep element/s positioned as fixed or relative depending on how it appears in the viewpoint. That means when you scroll vertical or horizontal, elements get stuck in their original position. This is a newer CSS rule and It does not work in Internet Explorer.

     You can see all the HTML and CSS in this link. Here is my table with some columns, For the first column, I used <th> tag rather than <td> 

CodePen Link

     You can see the scroll bar in the bottom, When I scroll it to right, we will still see the Primary Key columns by using position: sticky.

CodePen Link

     Here is the CSS rule which is responsible for keeping First column frozen when scroll bar moves. left:0px is important as much as position: sticky. By using left:0px, you are telling browser to not scroll this column at all. If you change its value to 5px, browser will scroll it 5px then freezes it. Without left:0px, column will scroll with all other columns.

table tbody tr th:nth-child(1), table thead tr th:nth-child(1){ position: sticky; 
left: 0px;
background: dimgray;

}