2015-12-15 188 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/

回答