表格table列寬度控制


<colgroup> 標簽用於對表格中的列進行組合,以便對其進行格式化。
通過使用 <colgroup> 標簽,可以向整個列應用樣式,而不需要重復為每個單元格或每一行設置樣式。
注釋:只能在 <table> 元素之內,在任何一個 <caption> 元素之后,在任何一個 <thead><tbody><tfoot><tr> 元素之前使用 <colgroup> 標簽。
提示:如果想對 <colgroup> 中的某列定義不同的屬性,請在 <colgroup> 標簽內使用 <col> 標簽。

屬性

屬性 描述
align left
right
center
justify
char
HTML5 不支持。規定在列組合中內容的水平對齊方式。
char character HTML5 不支持。規定根據哪個字符來對齊列組中的內容。
charoff number HTML5 不支持。規定第一個對齊字符的偏移量。
span number 規定列組應該橫跨的列數。
valign top
middle
bottom
baseline
HTML5 不支持。定義在列組合中內容的垂直對齊方式。
width pixels
%
relative_length
HTML5 不支持。規定列組合的寬度。

 

 

 

 

 

 

 

 

 

 

要讓colgroup的col設置的百分比生效,前提市在talbe上面設置 width="100%";

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body>

<table border="1" width="100%">
  <colgroup>
    <col width="40%">
    <col width="50%">
      <col width="10%">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM