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/