table field responsive not show header table
-
I’m use function shortcode table field responsive not show header table. Pls help me.
Image 1
Image 2use Shortcode Function
function shortcode_acf_tablefield( $atts ) { $a = shortcode_atts( array( 'table-class' => '', 'field-name' => false, 'post-id' => false, ), $atts ); $table = get_field( $a['field-name'], $a['post-id'] ); $return = ''; if ( $table ) { $return .= '<table class="' . $a['table-class'] . '" border="0">'; if ( ! empty( $table['caption'] ) ) { echo '<caption>' . $table['caption'] . '</caption>'; } if ( $table['header'] ) { $return .= '<thead>'; $return .= '<tr>'; foreach ( $table['header'] as $th ) { $return .= '<th scope="col">'; $return .= $th['c']; $return .= '</th>'; } $return .= '</tr>'; $return .= '</thead>'; } $return .= '<tbody>'; foreach ( $table['body'] as $tr ) { $return .= '<tr>'; foreach ( $tr as $td) { $return .= '<td>'; $return .= $td['c']; $return .= '</td>'; } $return .= '</tr>'; } $return .= '</tbody>'; $return .= '</table>'; } return $return; } add_shortcode( 'tablefield', 'shortcode_acf_tablefield' ); And Css
/*ACF Field table*/ @media screen and (max-width: 600px) { table { border: 0; } table caption { font-size: 1.3em; } table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; } table td { border-bottom: 1px solid #ddd; display: block; font-size: .8em; text-align: right; } table td::before { /* * aria-label has no advantage, it won't be read inside a table content: attr(aria-label); */ content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; } table td:last-child { border-bottom: 0; } }
table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; } table caption { font-size: 1.5em; margin: .5em 0 .75em; } table tr { background-color: #f8f8f8; border: 1px solid #ddd; padding: .35em; } table th, table td { padding: .625em; text-align: center; } table th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; }
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
- The topic ‘table field responsive not show header table’ is closed to new replies.