Creating Equal Height Columns using Table property
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:
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
Contact Us