基础框架 - 以表

Question

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

在接下来的页面（http://indianashrm.wpengine.com/chapters/）的问题，我有两个数据表，既不被堆叠在更小的设备和一流的。无条带也不工作。 .hover类正在工作。

这是我的代码为第一个表（我正在使用自定义职位类型的数据）。任何想法为什么表不堆叠和条纹不被删除？

<?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

的“堆叠”表类是.stack而非.stacked（http://foundation.zurb.com/sites/docs/table.html）

它看起来像你的CSS文件中不包括“无条纹”级（http://indianashrm.wpengine.com/wp-content/themes/indianashrm/vendor/foundation-sites/dist/foundation.min.css?ver=4.7.2）（也许这是CSS的版本4.7.2而不是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]; 
}