首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

chrome中tbody显示错误。如何解决

2012-09-27 
chrome中tbody显示异常。怎么解决一下代码在IE中浏览正常,在Chrome中,表格内容都集中到了表头的第一个单元

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里。

热点排行