首頁技術(shù)文章正文

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

更新時間:2021-04-22 來源:黑馬程序員 瀏覽量:

1577370495235_學IT就到黑馬程序員.gif


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

  <style type="text/css">

  table{

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

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

  }

  th,td{

  border:1px solid #30F;   /*為單元格單獨設置邊框*/

  }

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

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

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

  </style>
運行示例代碼,效果如圖1所示。

CSS控制單元格的寬高

圖1 CSS控制單元格寬高

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




猜你喜歡:

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

Css是什么?它有哪些優(yōu)點?

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

如何引入CSS樣式表?

黑馬程序員web前端學習

分享到:
在線咨詢 我要報名
和我們在線交談!