基礎框架 - 以表

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]; 
}