I have added responsive css to change a wide table with many columns and data into one single column for devices below 760px width. Issue with getting content labels. I have a dynamic table that displays a schedule of tournaments. This table has a set nuber of columns with specific headings. When the responsive css takes affect for devices 760px and below it converts pretty bell into one long column of multiple cells. However, the column headers now need to become row headers. I can fix this for the tournament page within my css code to work fine. The issue becomes there are multiple tables within this customized DNN website. So the css hard coded row labels will then be the same on any table. I need to see what can be done to allow the column headers on any table can be converted to the row labels when this css responsive code takes affect. My responsive css for tables on media 760px or smaller is: @media handheld, only screen and (max-width: 760px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; text-align:left; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 10px; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } The code that will work for "one" tables row labels is: Label the data td:nth-of-type(1):before { content: "First Name"; } td:nth-of-type(2):before { content: "Last Name"; } td:nth-of-type(3):before { content: "Job Title"; } td:nth-of-type(4):before { content: "Favorite Color"; } td:nth-of-type(5):before { content: "Wars of Trek?"; } td:nth-of-type(6):before { content: "Biz name"; } td:nth-of-type(7):before { content: "Date of Birth"; } td:nth-of-type(8):before { content: "Dream Vacation City"; } td:nth-of-type(9):before { content: "GPA"; } td:nth-of-type(10):before { content: "Arbitrary Data"; } But I have several different tables within this DNN website. You can see the affects at www.gamedaybaseball.com. Click on Tournaments/2016 USSSA Baseball Tournaments. is there css code that will work with multiple tables??
|