CSS怎樣控制表格單元格的寬高？

單元格的寬度和高度，有著和其他標(biāo)簽不同的特性，主要表現(xiàn)在單元格之間的互相影響上。使用CSS中的width和height屬性可以控制單元格的寬高。示例代碼如下：

  <style type="text/css">

  table{

  border:1px solid #30F;   /*設(shè)置table的邊框*/

  border-collapse:collapse;  /*邊框合并*/

  }

  th,td{

  border:1px solid #30F;   /*為單元格單獨(dú)設(shè)置邊框*/

  }

  .one{ width:100px; height:80px;}  /*定義"東"單元格的寬度與高度*/

  .two{ height:40px;}            /*定義"西"單元格的高度*/

  .three{ width:200px; }           /*定義"南"單元格的寬度*/ 

  </style>

圖1 CSS控制單元格寬高

通過圖1看出，“A房間”單元格和“B房間”單元格的高度均為80px，而“A房間”單元格和“C房間”單元格的寬度均為200px?？梢妼?duì)同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時(shí)，最終的寬度或高度將取其中的較大者。




猜你喜歡：

書寫CSS需要遵循哪些規(guī)則？它的結(jié)構(gòu)有什么特點(diǎn)？

Css是什么？它有哪些優(yōu)點(diǎn)？

常用css樣式大全[2020最新整理版]    

如何引入CSS樣式表？

黑馬程序員web前端學(xué)習(xí)