CSS的table-cell屬性怎麼用

table-cell是像內嵌元素和區塊元素一樣用display屬性來表現的顯示形式，可以用來建立表格和Excel儲存格，本篇文章就來跟大家分享一下關於CSS中table-cell屬性的使用方法。

我們先來介紹一下table-cell屬性的基本概念

table-cell是display屬性的值，可以給類似table標記的子元素的樣式。

但我認為它看起來像「元素可以輕鬆並排排列」。

最初「表格」的這一部分，就有一個表格標籤。所謂的Web網站開始普及的時候，框架基本上就是用table標籤來進行的。

由於HTML標籤本身是強制性地表現出來的，所以不可能像「顯示寬度的不同，縱向排列」那樣，現在它已經完全看不到與網路的回應。

因為HTML標籤本身被迫看起來像一張桌子，所以「像根據顯示寬度划船一樣」是不可能的，現在它已經完全看不到與網路的回應是的。

關於“表格”的“單元格”，在Excel等中聽說過“單元格”嗎？也就是說，display : table - cell；是可以再現表格裡面的框架的。

要注意的是：它的移動方式與普通的塊元素不同。

table-cell屬性的使用方法

基本上，都是在父元素上使用display：table;然後使用table-cell

#下面來看一個實例

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;
}

我們可以更改屬性值並嘗試各種各樣的操作，這裡就不多說了，更多精彩內容可以關注php中文網的CSS影片教學專欄！ ！ ！

以上是CSS的table-cell屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！