How to use the CSS table-cell attribute

table-cell is a display form represented by the display attribute like inline elements and block elements. It can be used to create tables and Excel cells. This article will share with you about How to use the table-cell attribute in CSS.

Let’s first introduce the basic concept of the table-cell attribute

table-cell is the value of the display attribute, which can be given similar to the table tag The style of the child element.

But I think it looks like "elements can be easily arranged side by side".

In this part of the initial "table", there is a table tag. When so-called Web websites began to become popular, the framework was basically carried out using table tags.

Since the HTML tag itself is mandatory to display, it is impossible to do like "display width difference, vertical arrangement", and now it is completely invisible and responsive to the network.

Because the HTML tag itself is forced to look like a table, "like rowing based on the display width" is not possible, and now it's completely unresponsive to the web.

Regarding the "cell" of "table", have you heard of "cell" in Excel, etc.? In other words, display: table - cell; can reproduce the frame in the table.

It should be noted that it moves differently from ordinary block elements.

How to use the table-cell attribute

Basically, use display: table; and then use table-cell

on the parent element Let’s look at an example

HTML

<p>apple</p> 
  </div> 
  <div class ="box orange"> 
    <p> oranges </p> 
  </div> 
  <div class ="box apple">
  <div class ="box grape"> 
    <p>grape</p> 
  </div> 
</div>

CSS

.container{
  display: table;
  width: 600px;
  height: 200px;
}
.box{
  display: table-cell;
  text-align: center;
  color: #fff;
}
.apple{
  background: #ED3B2B;
  vertical-align: middle;
}
.orange{
  background: #E4642C;
  vertical-align: top;
}
.grape{
  background: #9D2AC0;
  vertical-align: bottom;
}

We can change the attribute value and try various operations, I won’t say much here. For more exciting content, you can pay attention to the CSS Video Tutorial column on the php Chinese website! ! !

The above is the detailed content of How to use the CSS table-cell attribute. For more information, please follow other related articles on the PHP Chinese website!