自動目錄
在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] placeholder 屬性的CSS怎麼設定? 常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?
[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整
[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async
[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖
[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:
產生模糊的文字 有時我們需要產生模糊的文字,類似毛玻璃看到的效果。
隨機好文
[HP DL380G7] 生效啟動第3,4片網卡/開啟或關閉內建的網卡 HP DL380G7 預設第3,4片網卡裝完系統後找不到,難道是壞了?要怎麼辦?
[札記] 2016.7~12月札記 札記,只是札記
看懂DSUB DVI HDMI USB等各式影音接頭 看懂DSUB DVI HDMI等各式影音接頭
[Win7] 燒錄 iso 檔 在Windows7 中內建燒錄程式,可以直接把檔案拉到光碟機裡,再執行燒錄。
好用的3+2碼郵遞區號查詢系統推薦 網路上找到用地址輸入判斷3+2碼郵遞區號的辨識率不高,除了這個網站…
