add table header data elsewhere

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/

Let me know, if this helped you.
Greetings, Johann

@csleh and @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?

Hello,

Sorry, but I′m not sure, if I understand your question right. Could you please give an screenshot?

Thanks, Johann

@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:

where each number is clearly associated with Material, Quanity, Unit Price and Misc

to mobile where those drop away.

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 8 years, 1 month ago by lindseyleannej.
• This reply was modified 8 years, 1 month ago by lindseyleannej.
• This reply was modified 8 years, 1 month ago by lindseyleannej.

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:
https://codepen.io/dudleystorey/pen/Geprd

• This reply was modified 8 years, 1 month ago by csleh.
• This reply was modified 8 years, 1 month ago by csleh. Reason: credit and link to code

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 8 years, 1 month ago by Johann Heyne. Reason: Better whitespace
• This reply was modified 8 years, 1 month ago by Johann Heyne. Reason: Wrap the code in code
• This reply was modified 8 years, 1 month ago by Johann Heyne. Reason: Fix typo