chrome中tbody显示异常。怎么解决
一下代码在IE中浏览正常,在Chrome中,表格内容都集中到了表头的第一个单元格下,而且还对不齐?不知chrome怎么实现多tbody表格代码?
<table id="activity-list" class="activity-list">
<colgroup>
<col class="name">
<col class="time">
<col class="area">
<col class="range">
<col class="buyer">
<col class="summary">
<col class="mamage">
</colgroup>
<thead>
<tr class="col-name">
<th>
活动名称
</th>
<th>
活动时间
</th>
<th>
活动地区
</th>
<th>
商品范围
</th>
<th>
目标客户
</th>
<th>
活动详情
</th>
<th>
活动管理
</th>
</tr>
</thead>
<tbody style="display: block;" class="activityView">
<tr>
<td>
<p class="activityName">
21312</p>
<p class="toolName">
(会员营销活动)</p>
</td>
<td>
<p class="startTime">
开始时间:<br>
2012-08-17 00:00:00</p>
<p class="endTime">
结束时间:<br>
2012-08-31 23:59:59</p>
</td>
<td>
<p class="areas">
北京*天津*河北省*山西省*内蒙古自治区</p>
</td>
<td>
<p class="participate">
部分商品不参加</p>
<p>
<a class="addRange" href="#">添加商品</a></p>
<p>
<a class="editRange" href="#">修改商品</a></p>
</td>
<td>
<p class="customer">
本店会员</p>
</td>
<td>
<div class="detailsSummary">
<p>
普通会员,购买商品数量23件或消费额大于22.00元</p>
</div>
</td>
<td>
<p>
<a class="editActivity" href="#">修改</a></p>
<p>
<a class="detailActivity" href="#" id="0">删除 </a>
</p>
</td>
</tr>
<tr class="sep-row">
<td colspan="7">
</td>
</tr>
</tbody>
<tbody style="display: block;" class="activityView">
<tr>
<td>
<p class="activityName">
我去热</p>
<p class="toolName">
(会员单品多件免邮活动)</p>
</td>
<td>
<p class="startTime">
开始时间:<br>
2012-08-17 00:00:00</p>
<p class="endTime">
结束时间:<br>
2012-08-25 23:59:59</p>
</td>
<td>
<p class="areas">
北京*天津*河北省*山西省*内蒙古自治区</p>
</td>
<td>
<p class="participate">
部分商品参加</p>
<p>
<a class="addRange" href="#">添加商品</a></p>
<p>
<a class="editRange" href="#">修改商品</a></p>
</td>
<td>
<p class="customer">
本店会员</p>
</td>
<td>
<div class="detailsSummary">
<p>
高级会员,购买指定单品满3件,就免邮</p>
</div>
</td>
<td>
<p>
<a class="editActivity" href="#">修改</a></p>
<p>
<a class="detailActivity" href="#" id="1">删除 </a>
</p>
</td>
</tr>
<tr class="sep-row">
<td colspan="7">
</td>
</tr>
</tbody>
<tfoot id="pager" style="display: block;">
<tr>
<td colspan="7">
<button type="button" id="first-page" >
首页</button>
<button type="button" id="previous-page">
前一页</button>
<button type="button" id="next-page">
后一页</button>
<button type="button" id="last-page">
尾页</button>
共<span id="totalPages">2</span>页,第<span id="pageIndex">1</span>页
</td>
</tr>
<tr class="sep-row">
<td colspan="7">
</td>
</tr>
</tfoot>
</table>
[解决办法]
Chrome 对 display 支持的是CSS3版本,除了 flexbox 外其他的都会显示在 一个td里。