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/