自動目錄
在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
你可能感興趣的文章
UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff
[CSS] 背景 background css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun
表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用 CSS 垂直中文字 要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定 [HTLM5] html元件上的 data-* 屬性 html5 中元件中多了一個 data-*的屬性,這個屬性超級好用 [HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖 使用Google尋找你的手機 這近發現google竟然可以用來找android的手機,而且不需要經過什麼設定或安裝軟體。 [MAC] 截取螢幕畫面的方法 截取螢幕畫面的方法,在MAC中叫作螢幕快照,英文是screenshot [Freebsd] 定時測試 ADSL 是否斷線並重連 中華電信 ADSL 雖有固定 ip,可是他卻會不定時「斷線」, 使用以下的 方法可以定時測試是否斷線,以及重新撥接。 看懂DSUB DVI HDMI USB等各式影音接頭 看懂DSUB DVI HDMI等各式影音接頭 世紀帝國征服者新版本--被遺忘的帝國 世紀帝國征服者新版本--被遺忘的帝國 世紀二代的征服者是精典遊戲中的精典,aofe更好玩...的標籤即可,但是要選取一欄呢?
隨機好文