0

When making multiple-columns table into one column using CSS, how to make the labels of the data to be automatically created from thead information?

This article is about to make multi-columns table into one column when screen becomes narrow. But the "Label the Data" part is hardcoded.

/*
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: "Porn 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"; }

Could we automatically get the labels from thead and use them here, not hardcoded?

<thead>
<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Job Title</th>
    <th>Favorite Color</th>
    <th>Wars or Trek?</th>
    <th>Porn Name</th>
    <th>Date of Birth</th>
    <th>Dream Vacation City</th>
    <th>GPA</th>
    <th>Arbitrary Data</th>
</tr>
    </thead>

The attached is responsive_table.html program.

drupal_100
  • 1
  • 2
  • this is possible, see here to learn how you can manipulate pseudo-elements using js: http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after – sjkm May 18 '14 at 19:53

1 Answers1

0

use HTML5 attribute:

#some-id td:before { content: attr(data-title); }


#some-id td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 1px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}

and then:

<tr class="padding">
     <th>
          sth
     </th>
<tr>
<tr>
      <td data-title="sth">

      </td>
</tr>
Svmurvj
  • 176
  • 2
  • 9