自動目錄
在CSS中常有需要選取一欄，過去的作法就是此欄給他一個class，再指定此class即可：
[過去的作法]
表格
| class="col2" | ||
| class="col2" | ||
| class="col2" | ||
| class="col2" |
CSS
JQUERY
這樣的作法缺點就是每個格子都得指定class。但對於舊的瀏覽器這是唯一解。
[使用 :nth-child]
使用CSS可以快速的選取該欄。
CSS
JQUERY
$('table tr td:nth-child(3)').css("background-color", "yellow");
數字3是從右算到左的第3欄，包含隱藏的欄。
表格
[使用 colgroup/ col標籤]
HTML4 後出現了<colgroup>和<col>的標籤，但是到了 HTML5只剩下span屬性[2]，所以…
好處是一次可指定多欄。
先替表格分群，例如1欄一組，2,3欄另一組。
<table>
<colgroup>
<col class="grp1">
<col span="2" class="grp2">
</colgroup>
<thead></thead>
<tbody>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
...
</tbody>
</table>
再指定CSS即可
CSS
表格
備註
1. <colgroup>的標籤只要放在<table>中即可，並沒有一定要放在最上面。
2. <col>不一定要和全部欄位一致，例如你只要設定第3欄，但是表格有10欄，你的col只要有設置到第3個即可。
參考資料
[1] https://stackoverflow.com/questions/8375625/how-to-select-a-table-column-with-jquery
[2] https://www.w3schools.com/tags/tag_colgroup.asp
[3] https://www.w3schools.com/html/html_tables.asp
你可能感興趣的文章
[CSS] 背景 background css 中最常用的特性(property)之一就是 background ，這個有什麼好難的？事實上 backgroun
[HTML] CSS中的折字換行或不換行(防止容器破壞) 使用者留言時故意來用一串長長的且沒有任何空白的長字串，把你的容器破壞得很難看...
[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS，他的一般格式是這樣的：
關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成？就是當我們在網頁的輸入文字欄位中打入文字時，瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。
[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字，可能是為了複製或是為了看他清楚點，這篇來改變他選擇時的背影色。
[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖
[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候，習慣上表格的外框要比內部的線條來得粗，不但比較美觀，而且看起來比較完整
網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化
網頁自動轉址的四種方法 設定網頁自動轉址的四種方法，三種html，一種php
表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易，直接叫用 使用Google尋找你的手機 這近發現google竟然可以用來找android的手機，而且不需要經過什麼設定或安裝軟體。 [MAC] 截取螢幕畫面的方法 截取螢幕畫面的方法，在MAC中叫作螢幕快照，英文是screenshot [jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法，也有人稱他是假的ajax，作法就是.. 為什麼要買長達二十年的保單？ 為什麼要買長達二十年的保單？找一個可以說服我買二十年保單的理由。 談借錢 人借錢時手心向上頭向下，人還錢時手心向下頭向上的標籤即可，但是要選取一欄呢？
我有話要說
訪客留言
[無留言]
隨機好文
