CSS Multi-row Table Cells (Equal-height Columns, Multiple Rows)

In this article, we’ll introduce how to use the CSS display: table-cell property to implement multi-row table cell layout, achieving the effect of equal-height columns and multiple rows.

Read more: CSS Tutorial

Introduction to CSS Table Layout

The CSS table property can be used to create tabular structures in web page layouts. It allows us to arrange elements into a table, similar to the HTML table elements (table, tr, and td). The display: table-cell property can be used to control the layout of table cells.

Implementing Equal-Height Columns

In a table, we often need to set the heights of multiple cells to be equal to create the effect of equal-height columns. This can be easily achieved using the display: table-cell property. Here’s an example:

<style> 
.container { 
display: table; 
width: 100%; 
} 

.box { 
display: table-cell; 
border: 1px solid black; 
padding: 10px; 
width: 33.33%; 
} 
</style> 

<div class="container"> 
<div class="box"> 
<p>This is the content of the first column</p> 
</div> 
<div class="box"> 
<p>This is the content of the second column</p> 
<p>This is another content of the second column</p> 
</div> 
<div class="box"> 
<p>This is the content of the third column</p> 
</div> 
</div> 

In the example above, we use a container containing three div elements, each representing a cell. By setting the container’s display property to table, we transform it into a table layout. Then, by setting the box’s display property to table-cell, we convert its layout to a table cell. This automatically creates equal height columns.

Implementing Multi-Row Table Cells

In some cases, we may need to create multi-row table cells within a table. This is often used to display complex data or nested layouts. This can be easily achieved using the display: table-cell property. Here’s an example:

<style> 
.container { 
display: table; 
width: 100%; 
} 

.row { 
display: table-row; 
} 

.box { 
display: table-cell; 
border: 1px solid black; 
padding: 10px; 
width: 33.33%; 
} 
</style> 

<div class="container"> 
<div class="row"> 
<div class="box"> 
<p>Row 1, Column 1</p> 
</div> 
<div class="box"> 
<p>Row 1, Column 2</p> 
</div> 
<div class="box"> 
<p>Row 1, Column 2</p> 
</div> 
<div class="box"> 
<p>Row 1, Column 3</p> 
</div> 
</div> 
<div class="row">
<div class="box">
<p>Second row, first column</p>
</div>
<div class="box">
<p>Second row, second column</p>
</div>
<div class="box">
<p>Second row, third column</p>
</div>
</div>
</div>

In the example above, we added a row class as a container for each row. By setting the row’s display property to table-row, we transformed it into a table row. Each cell within row then used the .box class and set its display property to table-cell to implement table cell layout. This creates a multi-row table cell layout.

Summary

By using the CSS display: table-cell property, we can easily create equal-height columns and multi-row table cell layouts. This layout method can be used to create complex data displays or nested layouts. Precisely controlling the layout of table cells gives web designers greater flexibility and freedom in layout design. I hope this article helps you use the display: table-cell property in CSS.