<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[MVC之 CSS table colgroup 關係結構]]> apao <apao@www.apao.idv.tw> Thu, 13 Aug 2015 13:37:06 +0000 https://blog.apao.idv.tw/post// 與 Control 工程師討論之下，採用 colgroup的方式，切割出 tr 的寬度，就能讓工程師安心的在html中改寫寬度，不需要彙整兩端的人員去修改網頁程式了。


點擊在新視窗中瀏覽此圖片
以下常試著使用
1.table col 控制寬度
2.CSS class='a' 控制背景顏色
3.CSS class='a' 控制寬度與背景顏色

CSS, table, colgroup
style中指定
table, th, tr, td border 1px
th 背景與文字顏色
col class="a" 的背景, 居中設定
col class="b" 的寬度, 背景設定

colgroup中指定
col 列數量=1, 寬度100px（第一列）
col 列數量=1, col class="b" （第二列）
col 列數量=1, （第三列）

Source

<html>
<head>
<meta charset="utf-8">
<title>html table colgroup</title>
<style type="text/css">
table, th, td, tr{border:rgba(0,0,0,1.00) solid 1px; border-collapse:collapse; }
th{ background:rgba(0,0,0,0.8); color:rgba(255,255,255,1.00);}
.a{background:rgba(142,103,223,1.00); text-align:center;}
.b{width:150px;background:rgba(255,228,114,1.00);}
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<colgroup>
<col span="1" width="100"></col>
<col span="1" class="b"></col>
<col span="1" style="background:rgba(255,71,74,1.00);"></col>
</colgroup>
  <tbody>
     <tr>
      <th class="a">title01</th>
      <th>title02</th>
      <th>title03</th>
    </tr>
     <tr>
      <td class="a">01</td>
      <td>02</td>
      <td>03</td>
    </tr>
    <tr>
      <td class="a">04</td>
      <td>05</td>
      <td>06</td>
    </tr>
    <tr>
      <td class="a">07</td>
      <td>08</td>
      <td>09</td>
    </tr>
  </tbody>
</table>

</body>
</html>


參考：
http://blog.apao.idv.tw/html5/col/colgroup.php
Tags - , , , , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] MVC之 CSS table colgroup 關係結構]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment