Question

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

在下一页（http://indianashrm.wpengine.com/chapters/）中，我有两个数据表，两个数据表都没有堆叠，而.unstriped类也不起作用。 .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文件不包含“unstriped”类（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];
}

基础框架 - 表的问题

1 个答案: