Using CSS to Replace JavaScript for Your HTML Table Functionality: Increasing More Effective Maintainability and User Experience
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
As a developer, you have likely come across the need to improve interface functionality for users. The most common is probably working with data tables. These HTML tables can get quite large and thus need improved functionality to improve user experience. For example, there are times when you need to lock a table's header row or far-left column (or both). The reason for this is so that the user can scroll large data sets and still know what columns (header row) the data belongs to, along with their associated record IDs (far left column).
Using CSS instead of JavaScript will greatly improve maintainability as you only need to change or add something in one spot to get the desired outcome (the .css file). You no longer need to debug large JavaScripts, which can become quite tedious.
This article will get you started with using CSS where JavaScript has most commonly been used to add interface functionality to a web application with regard to an HTML table.
Adding Functionality to an HTML table
The first example will be locking a table's header. This is often needed when vertically scrolling large data sets, so that the user always know which columns the data belong to, no matter how many records they scroll across.
If you look on the Web, you'll find various solutions to getting this functionality, from creating multiple tables (a separate one for the header row) to using JavaScript and JQuery.
Using multiple tables works fine, but then you run into the problem of having to use JavaScript to scroll the header row along with the data table if you have lots of columns that necessitate horizontal scrolling to see them all.
Using JavaScript works good, but the script for this could be more than 100 lines of code or more, thus making it hard to maintain or add new functionality without debugging so much code.
Using JQuery is probably the best solution of the three described here. The problem with JQuery, though, is that of security and hard-to-read syntax. While the code is much less than JavaScript to achieve the same task, you still have to learn all of JQuery's usage syntax to become adept at using it. It is nearly similar to learning a new language and can take a considerable amount of time.
The CSS solution trumps all, as it is the most simple and easy to maintain. The next few examples will show just how easy it is.
Locking the Header Row
To lock the header row of a table with a tbody tag, simply add this line to your CSS file:
tbody{ max-height:100px; overflow-y:auto; display:block}
To test the table, the code for the table could be as follows:
<table >
<thead><tr><th>This is my header</th></tr></thead>
<tbody >
<tr>
<td>col1</td>
</tr> <tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr>
....
</tbody>
</table>
To see this working live, you can use a wonderful tool called JS Fiddle at http://jsfiddle.net/. Simply copy and paste the code into their appropriate sections and run the code. You can expand on this and take it in any direction you like.
Locking the Far Left Column
To lock the far left column, you add a class and assign the class to each <td> tag in the column. An example table appears below to illustrate this:
<div><table>
<tr><td class="headcol">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
<tr><td class="headcol">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>
To lock the column using this class assignment, add the code below to your CSS file:
div {
width: 600px;
overflow-x:scroll;
margin-left:5em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px; /*only relevant for first row*/
margin-top:-3px; /*compensate for top border*/
}
.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }
Spacing with regard to CSS attributes is always a delicate issue, and sometimes more CSS code needs to be added to adjust everything properly.
Adding Zebra Stripes
Zebra stripes (alternating row colors) are often added using JavaScript, but CSS can do so as well. Simply add this code to your CSS and voila, you have alternating row colors!
tr:nth-child(2n+1) {
background-color: #99ff99;
}
I will not go into detail about how this works, but n acts as a counter counting a certain number of elements before coloring a recurring element.
Adding Row Highlights
To highlight a row that has been hovered with the mouse by a user, simply add the following line to your CSS:
tr:hover {background-color: #FF0000}
Think about how much time this would take to do in JavaScript or even set up an existing script for this purpose.
Hiding Table Columns
To hide a table column, simply use this line of CSS code, which targets all your <td> elements having a class called 'col1':
.col1 {display: none; }
You can create a new fiddle using the test table below to demonstrate this at jsfiddle.net:
<table >
<thead><tr><th>This is my header</th></tr></thead>
<tbody >
<tr>
<td class="col1">col1</td>
</tr> <tr>
<td class="col1">col1</td>
</tr><tr>
<td class="col1">col1</td>
</tr><tr>
<td class="col1">col1</td>
</tr>
</tbody>
</table>
Conclusion
In this article, you learned how to use CSS to replace JavaScript in your current and future web applications for better maintainability and user experience. While there are some things CSS just cannot do, I hope to address these in a later article.
CSS is good at manipulating presentation elements, but cannot go beyond this to manipulate the data (i.e., like sorting columns). You need JavaScript/JQuery for this. However, you can use CSS to aid these technologies in several ways, giving your users the best user interface they could ask for. HTML5 is now coming on the scene and it looks to be promising to improve the way presentation data is handled, along with actual data manipulation. Most browsers now have a beta version of HTML5.
CSS has been around a long time, so all modern browsers support it, having come out in the last several years. Let's face it, if anyone is still using IE 5 or something this old, they probably shouldn't be using a computer :)!