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??

Hi Gordon,

First I would like to point out that this is a CSS question, not a DNN question. You would have the same challenge on any CMS you would be running this CSS at. We are a DNN specific forum.

With that said, if I understood you correctly, you want to setup something generic that can work like what you want for any table on the site where you don't have to hardcode the row labels.

My recommendation is to look at some jquery coding. I don't think you will be able to do what you want just with CSS alone. A mix of CSS and jquery logic would be required. How the jquery code will look like? Well, that is the work that needs to be figured out. I just wanted to give you a direction where I would recommend you to move towards. That is jQuery.

Sincerely,
Andy