IE浏览器table中的TD无数据边框不显示问题

在IE(目前发现是ie9,ie10)浏览器下，无数据的时候：

原先代码：
合并单元格：

<tr><td colspan="4">暂无数据</td></tr>

结构代码：

<div class="layui-clear">
    <div class="layui-table-body" id="table-body">
    //表格模板
    <include file="GlobalConfig/lib_table_platform_sdk" />
    </div>
</div>

解决方案：
将合并单元格的代码改为：

<tr>
    <td style="border:0;">&nbsp;</td>
    <td style="border:0;"><p class="no-table-data">暂无数据</p></td>
    <td style="border:0;">&nbsp;</td>
    <td style="border:0;">&nbsp;</td>
</tr>

由于无数据的情况下，“暂无数据”的显示都是相对于表头相同的位置，所以可以考虑使用定位来做。
同时要保证每个td里面都要有内容，所以使用空格符来代替。
添加样式：

.layui-clear{
  position: relative;
}
.no-table-data{
  position: absolute;
  left:50%; 
  margin-left:-24px;
  top:73px; 
  color: #263248;
  font-size: 12px;
}

第二种解决方案

table{border-collapse: separate;}

这种方法，表格的边框会比较粗。还是不太能解决。

思路参考：IE浏览器table中的TD无数据边框不显示问题

（使用表格的样式设置，解决不了，所以才用了定位的方法。若有更好的方法，可以给我留言。）

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： LQbank
• 本文链接： http://example.com/2019/07/19/IE浏览器table中的TD无数据边框不显示问题/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！