CSS How to Hide the First Column of a Table with CSS

In this article, we’ll explain how to hide the first column of a table using CSS. Hiding a table column can provide more flexibility and customization in your design and layout. CSS provides several ways to achieve this, and we’ll explore each method one by one.

Read more: CSS Tutorial

Method 1: Using the display property

The display property allows us to control how an element is displayed. We can set the first column of the table to be invisible by adding a class to each cell in the column and applying the following styles to the class:

.first-col {
display: none; 
} 

In the HTML code, we need to add this class to each cell in the first column:

<table> 
<tr> 
<td class="first-col">First column cell 1</td> 
<td>Second column cell 1</td> 
<td>Third column cell 1</td> 
</tr> 
<tr> 
<td class="first-col">First column cell 2</td> 
<td>Second column cell 2</td> 
<td>Third column cell 2</td> 
</tr> 
// Other rows... 
</table> 

This will hide all cells with the “first-col” class, thus hiding the first column of the entire table.

Method 2: Use the :first-child pseudo-class

The :first-child pseudo-class selects the first child element of a parent element. We can set the first column of a table to be invisible by using the :first-child pseudo-class and hiding it:

tr td:first-child {
display: none; 
} 

In the HTML code, we only need to use this style on the first cell in each row of the table:

<table> 
<tr> 
<td>First column cell 1</td> 
<td>Second column cell 1</td> 
<td>Third column cell 1</td> 
</tr> 
<tr> 
<td>First column cell 2</td> 
<td>Second column cell 2</td> 
<td>Third column cell 2</td> 
</tr> 
// Other rows... 
</table> 

This way, using the :first-child pseudo-class selects the first cell in each row, thus hiding the first column of the entire table.

Method 3: Using the nth-child pseudo-class

We can also use the :nth-child pseudo-class to select specific columns in a table. If we want to hide the first column, we can use the :nth-child(1) selector and hide it:

tr td:nth-child(1) { 
display: none; 
} 

In the HTML code, we only need to style the first cell in each row of the table:

<table> 
<tr> 
<td>First column cell 1</td> 
<td>Second column cell 1</td> 
<td>Third column cell 1</td> 
</tr> 
<tr> 
<td>First column cell 2</td> 
<td>Second column cell 2</td> 
<td>Third column cell 2</td> 
</tr> 
// Other rows... 
</table> 

By using :nth-child(1), we select the first cell in each row and hide it, thereby hiding the first column of the entire table.

Method 4: Use the visibility attribute

The visibility attribute can hide an element while retaining the space it occupies. We can set the first column of a table to be hidden by adding a class to each cell in that column and applying the following styles to that class:

.first-col {
visibility: hidden; 
} 

In the HTML code, we need to add this class to each cell in the first column:

<table> 
<tr> 
<td class="first-col">First column cell 1</td> 
<td>Second column cell 1</td> 
<td>Third column cell 1</td> 
</tr> 
<tr> 
<td class="first-col">First column cell 2</td> 
<td>Second column cell 2</td> 
<td>Third column cell 2</td> 
</tr> 
// Other rows... 
</table> 

This way, all cells with the “first-col” class will be hidden, but they will still occupy space within the table’s layout, thus hiding the entire first column.

Summary

Through this article, we’ve learned four ways to hide the first column of a table using CSS. Based on your needs and design requirements, you can choose the appropriate method to hide the first column of a table to achieve a better page layout and user experience. Whether using the display property, the :first-child pseudo-class, the :nth-child pseudo-class, or the visibility property, CSS allows you to flexibly control the display and hiding of tables. I hope this article is helpful!