- This topic has 4 replies, 2 voices, and was last updated 7 years, 2 months ago by Tom.
-
AuthorPosts
-
January 19, 2017 at 11:19 pm #266028johnzoro
Hi Peeps.
Not really a theme question, more of a generic CSS question.
I have found out a way to create what I wanted in terms of a table that when you go onto it on a mobile it changes to a stackable table
http://aged.org.uk/test/test.html
i have the html and css here on this test page of mine
what i want to know is, what css would i need to add if say i wanted to do another table with different information/catergories
ie not “good points” “bad points” etc
January 19, 2017 at 11:43 pm #266041TomLead DeveloperLead DeveloperNot too sure what you mean?
If you wanted to do another table, why not just copy this one you have working and change the text?
January 20, 2017 at 1:05 am #266071johnzoro/* responsive tables */ .responsive-stacked-table { width: 100%; border: 1px solid #ddd; border-collapse: collapse; table-layout: fixed; } .responsive-stacked-table th, .responsive-stacked-table td { padding: 10px; border-top: 1px solid #ddd; } .responsive-stacked-table thead { background: #eee; border-bottom: 3px solid #ddd; } .responsive-stacked-table tr:nth-child(even) { background: #f5f5f5; } .responsive-stacked-table .fa { margin-right: 5px; } .responsive-stacked-table .fa-check-circle { color: #690; } .responsive-stacked-table .fa-times-circle { color: #c00; } .responsive-stacked-table.with-mobile-labels { font-size: .85em; } @media (max-width: 1199px) { .container { width: auto; padding: 0 10px; } } @media (max-width: 767px) { .responsive-stacked-table thead { display: none; } .responsive-stacked-table tr, .responsive-stacked-table th, .responsive-stacked-table td { display: block; } .responsive-stacked-table td { border-top: none; } .responsive-stacked-table tr td:first-child { border-top: 1px solid #ddd; font-weight: bold; } .responsive-stacked-table.with-mobile-labels tr td:first-child { font-weight: 300; } .responsive-stacked-table.with-mobile-labels td:before { display: block; font-weight: bold; } .responsive-stacked-table.with-mobile-labels td:nth-of-type(1):before { content: "Model:"; } .responsive-stacked-table.with-mobile-labels td:nth-of-type(2):before { content: "Good Points:"; } .responsive-stacked-table.with-mobile-labels td:nth-of-type(3):before { content: "Bad Points:"; } .responsive-stacked-table.with-mobile-labels td:nth-of-type(4):before { content: "Conclusion:"; } .responsive-stacked-table.with-mobile-labels td:nth-of-type(5):before { content: "Check Price:"; } }
In the css it lists the catergorys. If i change the css it will affect my 1st table. I want more than one on the same site.
could i just copy some of the css and rename it
@media (max-width: 767px) { .responsive-stacked-table2 thead { display: none; } .responsive-stacked-table2 tr, .responsive-stacked-table2 th, .responsive-stacked-table2 td { display: block; } .responsive-stacked-table2 td { border-top: none; } .responsive-stacked-table2 tr td:first-child { border-top: 1px solid #ddd; font-weight: bold; } .responsive-stacked-table2.with-mobile-labels tr td:first-child { font-weight: 300; } .responsive-stacked-table2.with-mobile-labels td:before { display: block; font-weight: bold; } .responsive-stacked-table2.with-mobile-labels td:nth-of-type(1):before { content: "Color:"; } .responsive-stacked-table2.with-mobile-labels td:nth-of-type(2):before { content: "Age:"; } .responsive-stacked-table2.with-mobile-labels td:nth-of-type(3):before { content: "Material"; } .responsive-stacked-table2.with-mobile-labels td:nth-of-type(4):before { content: "Brand:"; } .responsive-stacked-table2.with-mobile-labels td:nth-of-type(5):before { content: "Flavour:"; } }
would this work? i’ll test it!
January 20, 2017 at 3:11 am #266118johnzoroDesktop table ^ I can edit the catergories in this if i want to create another table with different catergories that’s not a problem
but if you look at the mobile version
These catergories are in the css.
Now I could change the existing css to use different catergories but that would affect my existing table.
If i wanted 2 or more tables i would imagine i would need to add more css with the new catergories?
January 20, 2017 at 9:33 am #266209TomLead DeveloperLead DeveloperWhat you’ve done by giving the table a different class should work.
You can even keep the existing class and then add on to it:
class="responsive-stacked-table rst-v2"
Then the CSS:
.responsive-stacked-table.rst-v2.with-mobile-labels td:nth-of-type(1):before { content: "Color:"; }
-
AuthorPosts
- You must be logged in to reply to this topic.