自動目錄
在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
你可能感興趣的文章
[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async
產生模糊的文字 有時我們需要產生模糊的文字,類似毛玻璃看到的效果。
[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。
網頁自動轉址的四種方法 設定網頁自動轉址的四種方法,三種html,一種php
關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。
讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到
隨機好文
[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .
[Freebsd] 使用 ADSL 撥接上網 Freebsd上要使用 ADSL 撥接上網,該如何設定?
[札記] 2016.7~12月札記 札記,只是札記
維修冰箱 維修冰箱
精讚的版面變化 ▓此文僅作為舊文的記錄▓ 這篇文章為了紀念改版完成而撰寫。 原本的部落格是民國97年的作品,那時還是用舊有的技術來寫,很