Here’s an extremely handy method that combines web technologies with the useful features of spreadsheet software.
This technique replicates Excel’s “Freeze Panes” feature on a web page. Specifically, we will use a JavaScript library called jquery.fixedTblHdrLftCol.js to explain in detail how to freeze the first row and column of an HTML table on the web. This is especially useful for tables with a lot of information that require scrolling.
Introduction: Basics of the “Freeze Panes” Feature
Excel’s frequently used “Freeze Panes” feature keeps header rows and columns always visible, making it easier to track other data as you scroll through large datasets.
By providing a similar feature on web pages, users can always see important information (column and row titles) without losing track while checking the content.
On HTML pages, when a table becomes long vertically or horizontally, the first row can go out of view—this is exactly when this method helps.
CSS Design
The CSS below applies a stylish and practical design to the table.
These are the CSS rules for the table and the area after applying “Freeze Panes” (div.fTHLC-xxxxx).
<style>
body {
margin: 0;
padding: 0;
font-size: 18px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
line-height: 2em;
padding: 30px 0 20px 0;
}
thead th {
height: 30px;
width: 100px;
padding: 0 5px;
line-height: 30px;
border-right: dotted 1px #000000;
}
thead th:first-child {
width: 80px;
}
tbody td {
word-break: break-all;
padding: 5px;
border: 0;
width: 100px;
vertical-align: top;
border-bottom: dotted 1px #000000;
border-right: dotted 1px #000000;
}
tbody td:first-child {
width: 80px;
}
div.fTHLC-outer-wrapper {
border: 1px solid #000000;
margin: 50px auto;
}
div.fTHLC-inner-wrapper {
border: 1px dotted #000000;
}
div.fTHLC-outer-corner {
background-color: #ffffff;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
</style>
HTML Markup for the Table
The HTML for creating the table looks like this. It assumes a structure for a large dataset with many rows and columns.
Prepare a table with many “rows” and “columns.”
<h1>Display the table like Excel’s “Freeze Panes (freeze first row, freeze first column)”.<br>Try scrolling the table left and right below.</h1>
<table id="demo1">
<thead>
<tr>
<th>Table</th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th><th>Column 6</th><th>Column 7</th><th>Column 8</th><th>Column 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td><td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td><td>1-5</td><td>1-6</td><td>1-7</td><td>1-8</td><td>1-9</td>
</tr>
<tr>
<td>Row 2</td><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td><td>2-6</td><td>2-7</td><td>2-8</td><td>2-9</td>
</tr>
<tr>
<td>Row 3</td><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td><td>3-6</td><td>3-7</td><td>3-8</td><td>3-9</td>
</tr>
<tr>
<td>Row 4</td><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-6</td><td>4-7</td><td>4-8</td><td>4-9</td>
</tr>
<tr>
<td>Row 5</td><td>5-1</td><td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-6</td><td>5-7</td><td>5-8</td><td>5-9</td>
</tr>
<tr>
<td>Row 6</td><td>6-1</td><td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td><td>6-8</td><td>6-9</td>
</tr>
<tr>
<td>Row 7</td><td>7-1</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td>7-8</td><td>7-9</td>
</tr>
<tr>
<td>Row 8</td><td>8-1</td><td>8-2</td><td>8-3</td><td>8-4</td><td>8-5</td><td>8-6</td><td>8-7</td><td>8-8</td><td>8-9</td>
</tr>
<tr>
<td>Row 9</td><td>9-1</td><td>9-2</td><td>9-3</td><td>9-4</td><td>9-5</td><td>9-6</td><td>9-7</td><td>9-8</td><td>9-9</td>
</tr>
<tr>
<td>Row 10</td><td>10-1</td><td>10-2</td><td>10-3</td><td>10-4</td><td>10-5</td><td>10-6</td><td>10-7</td><td>10-8</td><td>10-9</td>
</tr>
<tr>
<td>Row 11</td><td>11-1</td><td>11-2</td><td>11-3</td><td>11-4</td><td>11-5</td><td>11-6</td><td>11-7</td><td>11-8</td><td>11-9</td>
</tr>
<tr>
<td>Row 12</td><td>12-1</td><td>12-2</td><td>12-3</td><td>12-4</td><td>12-5</td><td>12-6</td><td>12-7</td><td>12-8</td><td>12-9</td>
</tr>
<tr>
<td>Row 13</td><td>13-1</td><td>13-2</td><td>13-3</td><td>13-4</td><td>13-5</td><td>13-6</td><td>13-7</td><td>13-8</td><td>13-9</td>
</tr>
<tr>
<td>Row 14</td><td>14-1</td><td>14-2</td><td>14-3</td><td>14-4</td><td>14-5</td><td>14-6</td><td>14-7</td><td>14-8</td><td>14-9</td>
</tr>
<tr>
<td>Row 15</td><td>15-1</td><td>15-2</td><td>15-3</td><td>15-4</td><td>15-5</td><td>15-6</td><td>15-7</td><td>15-8</td><td>15-9</td>
</tr>
<tr>
<td>Row 16</td><td>16-1</td><td>16-2</td><td>16-3</td><td>16-4</td><td>16-5</td><td>16-6</td><td>16-7</td><td>16-8</td><td>16-9</td>
</tr>
<tr>
<td>Row 17</td><td>17-1</td><td>17-2</td><td>17-3</td><td>17-4</td><td>17-5</td><td>17-6</td><td>17-7</td><td>17-8</td><td>17-9</td>
</tr>
<tr>
<td>Row 18</td><td>18-1</td><td>18-2</td><td>18-3</td><td>18-4</td><td>18-5</td><td>18-6</td><td>18-7</td><td>18-8</td><td>18-9</td>
</tr>
</tbody>
</table>
Introducing and Configuring jquery.fixedTblHdrLftCol.js
First, to use the jquery.fixedTblHdrLftCol.js library, load the jquery-2.1.4.min.js and jquery.fixedTblHdrLftCol.js files.
Next, write the JavaScript that applies the freeze functionality to a specific table.
Write $('table area').fixedTblHdrLftCol({options}). In the options, you can specify the table’s vertical/horizontal size and what to freeze (columns or rows).
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.fixedTblHdrLftCol.js"></script>
<script>
$(function() {
$('#demo1').fixedTblHdrLftCol({
scroll: {
height: '200px',
width: '330px'
}
});
});
</script>
This code sets a scrollable area with a height of 200px and a width of 330px for the table with the ID demo1, and within that area, the table’s first row and first column are fixed.
Demo Page: Display a Table Like Excel’s “Freeze Panes (Freeze First Row, Freeze First Column)”
The link to the demo page below shows an example using this technique in practice, and the source code is also available on GitHub.
Demo page: Display a table like Excel’s “Freeze Panes (freeze first row, freeze first column)”
Source: fixedTblHdrLftCol
Conclusion
Mimicking Excel’s “Freeze Panes” feature on web pages provides users with a very convenient experience. By leveraging jquery.fixedTblHdrLftCol.js, even tables that handle complex and large datasets can be displayed in a user-friendly and effective way. I hope this article proves helpful for your web development.
*Please use at your own risk if reusing.
Do not reuse the Google Analytics tag within the head tag of the demo page.
