2015-12-15 233 views
0

對於我的學校項目,我必須使舊的CRM響應。所有的桌子現在都完全響應,但有一個小問題。這是它目前的樣子:https://gyazo.com/d39dfa92f335538b66bdbbf432186a95響應表css

我現在正在製作網站的人問我是否可以在每個td中放置表頭。我已經嘗試了一些都失敗了的事情。所以我不知道現在我還能做什麼。 這裏是我用來獲取響應

/* 
 
Max width before this PARTICULAR table gets nasty 
 
This query will take effect for any screen smaller than 760px 
 
and also iPads specifically. 
 
*/ 
 
@media 
 
only screen and (max-width: 760px), 
 
(min-device-width: 500px) and (max-device-width: 1000px) { 
 

 
\t /* Force table to not be like tables anymore */ 
 
\t table, thead, tbody, th, td, tr { 
 
\t \t display: block; 
 
\t } 
 
\t 
 
\t /* Hide table headers (but not display: none;, for accessibility) */ 
 
\t thead tr { 
 
\t \t position: absolute; 
 
\t \t top: -9999px; 
 
\t \t left: -9999px; 
 
\t } 
 
\t 
 
\t tr { border: 1px solid #ccc; } 
 
\t 
 
\t td { 
 
\t \t /* Behave like a "row" */ 
 
\t \t border: none; 
 
\t \t border-bottom: 1px solid #eee; 
 
\t \t padding-left: 5%; 
 
\t } 
 
\t 
 
\t td:before { 
 
\t \t /* Now like a table header */ 
 
\t \t position: absolute; 
 
\t \t /* Top/left values mimic padding */ 
 
\t \t top: 6px; 
 
\t \t left: 6px; 
 
\t \t width: 45%; 
 
\t \t padding-right: 10px; 
 
\t \t white-space: nowrap; 
 
\t } 
 
\t 
 
}

我用這個網站的CSS代碼表的CSS。 https://css-tricks.com/responsive-data-tables/

回答