How to freeze first column of table in html

table freez first column

How to freeze first column of table in html, If the table content is more and adding number of columns, Many web designers creating responsive HTML tables. 

It is very uncomfortable to scroll horizontally to see the table rows.

By adding this, You can see all columns of div without any frustration. So fixed the column of table using only CSS. 

Description:

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag, it is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

The <html> element is the root element of an HTML page, the <head> element contains meta information and <title> element specifies a title for the document. The <style> tag is used to define style information for an HTML document.

The <body> tag defines the document’s body, it contains all the contents of an HTML document.

The <div> tag defines a division or a section in an HTML document and the div element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
}

In HTML, table is defined with the <table> tag where each table row is defined with the <tr> tag.

A table header is defined with the <th> tag and table data/cell is defined with the <td> tag.In the Table we defined a <tr> tag.<tr>tag is defined a class called headcol. headcol class is defined with styles like

position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;

By using this style we can freeze first column of the table.<td> tag defined a class called long. long class defined the background color in CSS.

HTML

<div>
<table>
        <tr><th class="headcol">1</th>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        </tr>
        <tr><th class="headcol">2</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">3</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">4</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">5</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">6</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
</table>
</div>

How does it works –

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid grey;
}

td, th {
  margin: 0;
  border: 1px solid grey;
  white-space: nowrap;
  border-top-width: 0px;
}

div {
  width: 500px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}

.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}

.headcol:before {
  content: 'Row ';
}

.long {
  background: yellow;
}
</style>
</head>
<body>

<div>
<table>
        <tr><th class="headcol">1</th>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        </tr>
        <tr><th class="headcol">2</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">3</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">4</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">5</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
        <tr><th class="headcol">6</th><td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td>
        <td class="long">Lorem Ipsum</td></tr>
</table>
</div>
</body>
</html>

Output

A table with rows and columns with a scroll bar and freezing first column of table using CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *