Creating Equal Height Columns using Table property

Creating Equal Height Columns using Grid

In this approach, we are using the Table property to create an equal height column in CSS.in which we use display: table; on the parent elementand on chlid elements.

Creating Equal Height Columns using Table property Syntax:

border: table_width table_color;

Creating Equal Height Columns using Table property Example:

Here we are using the above method.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: table;
            width: 50%;
        }
 
        .column {
            display: table-cell;
            padding: 16px;
            background-color: skyblue;
        }
 
        .column:nth-of-type(2n-1) {
 
            background-color: gray;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
          w3wiki
      </h1>
    <h3 style="color: green;">
          EQUAL_HEIGHT_COLUMN
      </h3>
    <div class="container">
        <div class="column">
            <p>Column 1</p>
        </div>
        <div class="column">
            <p>Column 2</p>
 
 
        </div>
        <div class="column">
            <p>Column 3</p>
        </div>
    </div>
</body>
</html>

Output:

Equal Height Columns using Table property

Explanation:

In the above example we are creating a parent div with three child div.
We are using display: table style to parent div and display:table-cell; to child divs.
CSS sets the container to display as a table and each column as a table cell, ensuring equal height.
Alternate columns have different background colors defined using nth-of-type selector to style them differently.

How to Create Equal Height Columns in CSS ?

CSS represents how your HTML elements need to be displayed on a web browser. It can control a lot of one’s work as it can control the layout of multiple web pages using a single CSS file, which is also called an external stylesheet. Using CSS property, we can set the height of the column equal using the following methods.

Table of Content

Creating Equal Height Columns Using Flex
Creating Equal Height Columns using Grid
Creating Equal Height Columns using Table property

Tags:

#CSS #Web Technologies