社區(qū)精選 | 超 Nice 的表格響應(yīng)式布局小技巧
SegmentFault 思否社區(qū)小編說
自 2022-07-01 起 SegmentFault 思否公眾號改版啦！之后將陸續(xù)推出新的欄目和大家見面?。ㄕ埵媚恳源絶?）
在「社區(qū)精選」欄目中，我們將為廣大開發(fā)者推薦來自 SegmentFault 思否開發(fā)者社區(qū)的優(yōu)質(zhì)技術(shù)文章，這些文章全部出自社區(qū)中充滿智慧的技術(shù)創(chuàng)作者哦!
希望通過這一欄目，大家可以共同學習技術(shù)干貨，GET 新技能和各種花式技術(shù)小 Tips。
歡迎越來越多的開發(fā)者加入創(chuàng)作者的行列，我們將持續(xù)甄選出社區(qū)中優(yōu)質(zhì)的內(nèi)容推介給更多人，讓閃閃發(fā)光的技術(shù)創(chuàng)作者們走到聚光燈下，被更多人認識。
「社區(qū)精選」投稿郵箱：[email protected]
投稿請附上社區(qū)文章地址
本期為大家推薦的是社區(qū)作者 chokcoco 的文章 ，在這篇文章中作者嘗試僅僅使用 CSS，實現(xiàn)一種響應(yīng)式的布局效果。
看完不禁稱贊：妙啊??！
話不多說，馬上進入正文學習啦！
今天，遇到了一個很有意思的問題，一名群友問我，僅僅使用 CSS，能否實現(xiàn)這樣一種響應(yīng)式的布局效果：
簡單解析一下效果：
在屏幕視口較為寬時，表現(xiàn)為一個整體 Table 的樣式 而當屏幕視口寬度較小時，原 Table 的每一行數(shù)據(jù)單獨拆分為一個 Table 進行展示
基本結(jié)構(gòu)的實現(xiàn)
<table>
<caption>Lorem ipsum !</caption>
<thead>
<tr>
<th>Account</th>
<th>Due Date</th>
<th>Amount</th>
<th">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
// ... 重復(fù)多組
</tbody>
</table>
使用媒體查詢將單個 Table 拆分成多個
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
display: block;
margin-bottom: 10px;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
}
}
利用媒體查詢，設(shè)定屏幕寬度小于 600px 的樣式 去掉原本表格的 <thead> 表頭，直接隱藏即可 將原本的一行 <tr>，設(shè)置為 display: block， 并且設(shè)置一個下邊距，使之每一個分開 將原本的一行內(nèi)的 <td>，設(shè)置為 display: block，這樣，它們就會豎向排列，使每一個 <tr> 形成新的一個子 table
借助偽元素及其特性，實現(xiàn)表頭信息展示
<table>
// 上方信息保持一致
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
// ... 每個 tr 進行同樣的處理
</tbody>
</table>
@media screen and (max-width: 600px) {
// ... 保持一致
table td {
position: relative;
display: block;
text-align: right;
}
table td::before {
position: absolute;
left: 10px;
right: 0;
content: attr(data-label);
}
}
最后
評論
圖片
表情