Title: add table header data elsewhere
Last modified: August 31, 2016

---

# add table header data elsewhere

 *  [csleh](https://wordpress.org/support/users/csleh/)
 * (@csleh)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/add-table-header-data-elsewhere/)
 * Is it possible to put the content from the table header in the td section? Working
   on a responsive table.
 * the goal is this:
    `<td data-th="Header Content">table cell content</td>`
 * so the first header content goes in the first td, second header content goes 
   in the second td, etc.
 * IF this is even possible, this block needs adjusting
 *     ```
       foreach ( $table['body'] as $tr ) {
                       echo '<tr>';
                           foreach ( $tr as $td ) {
                               echo '<td data-th="call-for-header-content">';
                                   echo $td['c'];
                               echo '</td>';
                           }
                       echo '</tr>';
                   }
       ```
   
 * but I can’t figure out 1- how to show the header content elsewhere, and then 
   2- how to cycle by th/td number.
 * the second part is not really a question about this plugin, but the first part
   is.
 * [https://wordpress.org/plugins/advanced-custom-fields-table-field/](https://wordpress.org/plugins/advanced-custom-fields-table-field/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [Johann Heyne](https://wordpress.org/support/users/jonua/)
 * (@jonua)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/add-table-header-data-elsewhere/#post-6922034)
 * I’m not quite sure what you meant. The thing is not to screw the source html 
   of a table but using css to make a table view responsive. Here is an article 
   about making tables responsive by css [https://css-tricks.com/responsive-data-tables/](https://css-tricks.com/responsive-data-tables/)
 * Let me know, if this helped you.
    Greetings, Johann
 *  [lindseyleannej](https://wordpress.org/support/users/lindseyleannej/)
 * (@lindseyleannej)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/add-table-header-data-elsewhere/#post-8769956)
 * [@csleh](https://wordpress.org/support/users/csleh/) and [@jonua](https://wordpress.org/support/users/jonua/)
   did you ever find a viable solution for this?
 * Essentially the Table Heading Data gets lost on mobile so the numbers beneath
   each section become unclear without those headings moving into each unique row.
 * Is this feasible or has anyone created code to do this?
 *  Plugin Author [Johann Heyne](https://wordpress.org/support/users/jonua/)
 * (@jonua)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/add-table-header-data-elsewhere/#post-8776298)
 * Hello,
 * Sorry, but I´m not sure, if I understand your question right. Could you please
   give an screenshot?
 * Thanks, Johann
 *  [lindseyleannej](https://wordpress.org/support/users/lindseyleannej/)
 * (@lindseyleannej)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/add-table-header-data-elsewhere/#post-8782998)
 * [@jonua](https://wordpress.org/support/users/jonua/) would it be possible on 
   mobile for the Table Heading Descriptors to appear within each row for clarity?
 * For example the client is concerned a lot of the context for the data is lost
   from desktop to mobile:
    Desktop View: ⌊Desktop Table View⌉
 * where each number is clearly associated with Material, Quanity, Unit Price and
   Misc
 * to mobile where those drop away.
 * Mobile View
    ⌊Mobile View⌉
 * Truly appreciate your assistance and hopefully we can find a solution for them.
   I know they love the visual table and would willingly pay for a Pro version long-
   term.
    -  This reply was modified 9 years, 3 months ago by [lindseyleannej](https://wordpress.org/support/users/lindseyleannej/).
    -  This reply was modified 9 years, 3 months ago by [lindseyleannej](https://wordpress.org/support/users/lindseyleannej/).
    -  This reply was modified 9 years, 3 months ago by [lindseyleannej](https://wordpress.org/support/users/lindseyleannej/).
 *  Thread Starter [csleh](https://wordpress.org/support/users/csleh/)
 * (@csleh)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/add-table-header-data-elsewhere/#post-8783386)
 * So here’s what I did, this is on the single page template:
 *     ```
       <?php $table = get_field( 'table' );
       if ( $table ) {
           echo '<table border="0">';
               if ( $table['header'] ) {
                   echo '<thead>';
                       echo '<tr>';
                           foreach ( $table['header'] as $th ) {
                               echo '<th>';
                                   echo $th['c'];
                               echo '</th>';
                           }
                       echo '</tr>';
                   echo '</thead>';
               }
               echo '<tbody>';
                   foreach ( $table['body'] as $tr ) {
                       echo '<tr>';
                           foreach ( $tr as $td ) {
                               echo '<td>';
                                   echo $td['c'];
                               echo '</td>';
                           }
                       echo '</tr>';
                   }
               echo '</tbody>';
           echo '</table>'; ?>
       <script>
       var headertext = [];
       var headers = document.querySelectorAll("thead");
       var tablebody = document.querySelectorAll("tbody");
       for (var i = 0; i < headers.length; i++) {
       	headertext[i]=[];
       	for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
       	  var current = headrow;
       	  headertext[i].push(current.textContent.replace(/\r?\n|\r/,""));
       	  }
       } 
       for (var h = 0, tbody; tbody = tablebody[h]; h++) {
       	for (var i = 0, row; row = tbody.rows[i]; i++) {
       	  for (var j = 0, col; col = row.cells[j]; j++) {
       	    col.setAttribute("data-th", headertext[h][j]);
       	  } 
       	}
       }
       </script>
       <?php } ?>
       ```
   
 * The thead text is set as a data entry on each td, and when the table is shown
   on mobile each td shows that value directly above the content.
    I got the code
   from here: [http://codepen.io/dudleystorey/pen/Geprd](http://codepen.io/dudleystorey/pen/Geprd)
    -  This reply was modified 9 years, 3 months ago by [csleh](https://wordpress.org/support/users/csleh/).
    -  This reply was modified 9 years, 3 months ago by [csleh](https://wordpress.org/support/users/csleh/).
      Reason: credit and link to code
 *  Plugin Author [Johann Heyne](https://wordpress.org/support/users/jonua/)
 * (@jonua)
 * [9 years, 3 months ago](https://wordpress.org/support/topic/add-table-header-data-elsewhere/#post-8785596)
 * As fare as I can understand this solution and problem, the data-th attributes
   are missing. The following code shows how to put these attributes in the table
   html…
 *     ```
       <?php
   
       $table = get_field( 'table' );
   
       if ( $table ) {
           echo '<table border="0">';
               if ( $table['header'] ) {
                   echo '<thead>';
                       echo '<tr>';
                           foreach ( $table['header'] as $th ) {
                               echo '<th>';
                                   echo $th['c'];
                               echo '</th>';
                           }
                       echo '</tr>';
                   echo '</thead>';
               }
               echo '<tbody>';
                   foreach ( $table['body'] as $tr ) {
                       echo '<tr>';
                           foreach ( $tr as $i => $td ) {
                               // get the table header content by column index
                               echo '<td data-th="' . $table['header'][ $i ]['c'] . '">';
                                   echo $td['c'];
                               echo '</td>';
                           }
                       echo '</tr>';
                   }
               echo '</tbody>';
           echo '</table>';
       }
   
       ?>
       ```
   
    -  This reply was modified 9 years, 3 months ago by [Johann Heyne](https://wordpress.org/support/users/jonua/).
      Reason: Better whitespace
    -  This reply was modified 9 years, 3 months ago by [Johann Heyne](https://wordpress.org/support/users/jonua/).
      Reason: Wrap the code in code
    -  This reply was modified 9 years, 3 months ago by [Johann Heyne](https://wordpress.org/support/users/jonua/).
      Reason: Fix typo

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘add table header data elsewhere’ is closed to new replies.

 * ![](https://ps.w.org/advanced-custom-fields-table-field/assets/icon-256x256.png?
   rev=1962986)
 * [Table Field Add-on for ACF and SCF](https://wordpress.org/plugins/advanced-custom-fields-table-field/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/advanced-custom-fields-table-field/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/advanced-custom-fields-table-field/)
 * [Active Topics](https://wordpress.org/support/plugin/advanced-custom-fields-table-field/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/advanced-custom-fields-table-field/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/advanced-custom-fields-table-field/reviews/)

 * 6 replies
 * 3 participants
 * Last reply from: [Johann Heyne](https://wordpress.org/support/users/jonua/)
 * Last activity: [9 years, 3 months ago](https://wordpress.org/support/topic/add-table-header-data-elsewhere/#post-8785596)
 * Status: not a support question