怎么用CSS3實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)表格

這篇文章主要介紹“怎么用CSS3實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)表格”，在日常操作中，相信很多人在怎么用CSS3實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)表格問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”怎么用CSS3實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)表格”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

文章目錄  

• HTML

• CSS3

設(shè)計(jì)響應(yīng)式頁面的時(shí)候，最難的是表格table的處理，table作為數(shù)據(jù)表格設(shè)計(jì)不可缺少的元素，在數(shù)據(jù)應(yīng)用項(xiàng)目中起著重要的作用，但是要想讓表格適應(yīng)各種屏幕還真有點(diǎn)麻煩。本文將用實(shí)例給大家演示如何使用CSS3來實(shí)現(xiàn)的響應(yīng)式數(shù)據(jù)表格。

當(dāng)屏幕足夠?。ㄈ缡謾C(jī)屏幕），以至于小于表格的最小寬度，如果不做響應(yīng)式處理，那么將會(huì)出現(xiàn)水平滾動(dòng)條，需要手動(dòng)移動(dòng)放大來查看超出屏幕的部分，這樣體驗(yàn)很差。我們的解決辦法是使用CSS @media queries來檢測屏幕尺寸，當(dāng)屏幕尺寸足夠小的時(shí)候，重新布局table表格。

HTML

假設(shè)我們有一個(gè)如下的數(shù)據(jù)表格，當(dāng)然它可能有更多的列，文中代碼只用了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>

CSS3

首先，我們使用一些簡單的css代碼就可以呈現(xiàn)一個(gè)基本的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; }

這個(gè)時(shí)候，我們使用電腦瀏覽器打開頁面，發(fā)現(xiàn)展示了一個(gè)簡單的表格，隨著瀏覽器窗口的縮小，表格寬度會(huì)變小，但當(dāng)瀏覽器窗口足夠小的時(shí)候，問題就來了，表格寬度由于表格單元的內(nèi)容撐著無法再變小，從而出項(xiàng)橫向滾動(dòng)條的情況，那么下面的css3代碼提供了解決方案。

我們要做的是，使用css3的@media檢測到屏幕尺寸，將表格元素設(shè)置為block塊狀，并且隱藏表頭，將td設(shè)置下邊框看起來跟一行行的一樣。最后我們使用css3的:before { content: "姓名"; }生成每行對(duì)應(yīng)的標(biāo)簽定義，這樣就能知道每行數(shù)據(jù)的意義。

@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: "出生年月"; } }

現(xiàn)在你用手機(jī)打開頁面，你會(huì)發(fā)現(xiàn)表格的布局變了，它是這樣的：

當(dāng)然，本例也不是最佳解決方案，有興趣的朋友可以參照bootstrap關(guān)于響應(yīng)式表格的處理。

到此，關(guān)于“怎么用CSS3實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)表格”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！