溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用CSS3實現響應式數據表格”，在日常操作中，相信很多人在怎么用CSS3實現響應式數據表格問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用CSS3實現響應式數據表格”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
文章目錄
HTML
CSS3
設計響應式頁面的時候，最難的是表格table的處理，table作為數據表格設計不可缺少的元素，在數據應用項目中起著重要的作用，但是要想讓表格適應各種屏幕還真有點麻煩。本文將用實例給大家演示如何使用CSS3來實現的響應式數據表格。
當屏幕足夠小（如手機屏幕），以至于小于表格的最小寬度，如果不做響應式處理，那么將會出現水平滾動條，需要手動移動放大來查看超出屏幕的部分，這樣體驗很差。我們的解決辦法是使用CSS @media queries來檢測屏幕尺寸，當屏幕尺寸足夠小的時候，重新布局table表格。
假設我們有一個如下的數據表格，當然它可能有更多的列，文中代碼只用了3列。
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>出生年月</th>
</tr>
</thead>
<tbody>
<tr>
<td>蔣介</td>
<td>男</td>
<td>1998.2.5</td>
</tr>
<tr>
<td>許維</td>
<td>女</td>
<td>1998.2.1</td>
</tr>
</tbody>
</table>
首先，我們使用一些簡單的css代碼就可以呈現一個基本的table表格，css代碼并沒有特別的地方。
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
這個時候，我們使用電腦瀏覽器打開頁面，發現展示了一個簡單的表格，隨著瀏覽器窗口的縮小，表格寬度會變小，但當瀏覽器窗口足夠小的時候，問題就來了，表格寬度由于表格單元的內容撐著無法再變小，從而出項橫向滾動條的情況，那么下面的css3代碼提供了解決方案。
我們要做的是，使用css3的@media檢測到屏幕尺寸，將表格元素設置為block塊狀，并且隱藏表頭，將td設置下邊框看起來跟一行行的一樣。最后我們使用css3的:before { content: "姓名"; }生成每行對應的標簽定義，這樣就能知道每行數據的意義。
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "姓名"; }
td:nth-of-type(2):before { content: "性別"; }
td:nth-of-type(3):before { content: "出生年月"; }
}
現在你用手機打開頁面，你會發現表格的布局變了，它是這樣的：
當然，本例也不是最佳解決方案，有興趣的朋友可以參照bootstrap關于響應式表格的處理。
到此，關于“怎么用CSS3實現響應式數據表格”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
