goTOP
August 13, 2015

MVC之 CSS table colgroup 關係結構

| |
網頁語言 » CSS | 閱覽(1576) | Posted by apao at 21:37
MVC模式之下,主導View視覺的設計師,必須顧慮到 Control 工程師較容易改寫 table tr 寬度時,以 CSS 控制寬度 tr 是一個辦法,但是負責 Control 卻是越界去調整 CSS 設定,便達不到 MVC 理想境界了。
與 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
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我