Foundation Framework - 表格问题

Question

（使用 JointsWP 和 Foundation 6.2.1 自定义 WordPress 主题）

在下一页 (http://indianashrm.wpengine.com/chapters/) 中，我有两个 table 数据，但在较小的设备上都没有堆叠，class .unstriped 也不起作用。 .hover class 正在工作。

这是第一个 table 的代码（我为数据使用自定义 post 类型）。知道为什么 table 没有堆叠并且没有移除条纹吗？

<?php
$args = array (
'post_type'     => 'shrm_local_chapter',
'posts_per_page'    => -1,
'post_status'       => 'publish',
'order'         => 'ASC',
'orderby'           => 'chapter_location'
);
$loop = new WP_Query($args);
?>
<h2>Local Chapters</h2>
<p>Scroll down to obtain contact information for your nearest local Indiana SHRM Chapter. Information on how to join that chapter can be found on their local web page.</p>
<table class="stacked unstriped hover">
  <thead>
    <tr>
      <th width="50%">Name</th>
      <th width="50%">Location</th>
    </tr>
  </thead>
  <tbody>

<?php if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();

$shrm_location = get_field( "chapter_location" );
$shrm_url = get_field( "chapter_url" );
$shrm_name = get_the_title();

echo '<tr>';
echo '<td><a href="'.$shrm_url.'">'.$shrm_name.'</a></td>';
echo '<td>'.$shrm_location.'</td>';
echo '</tr>';
endwhile; endif; wp_reset_postdata(); ?>
</tbody>
</table>

Answer 1

"Stacked" table 的 class 是 .stack 而不是 .stacked (http://foundation.zurb.com/sites/docs/table.html)

您的 css 文件似乎不包含 "unstriped" class (http://indianashrm.wpengine.com/wp-content/themes/indianashrm/vendor/foundation-sites/dist/foundation.min.css?ver=4.7.2)（也许这是 css 的版本 4.7.2 =22=] 而不是 6.2.1？）所以您必须创建自己的版本或升级 CSS 文件：

table.unstriped tbody {
    background-color: #[your std background colour here];
}
table.unstriped tbody tr {
    border-bottom: 0;
    border-bottom: 1px solid #f1f1f1; // your border colour, this is the stock colour
    background-color: #[your std background colour here];
}

Foundation Framework - 表格问题

Foundation Framework - Issues with Tables

wordpress

zurb-foundation