看起来如何

HTML：

<div class="table">
    <div class="row">
        <div class="cell"></div>
        ...
    </div>
    ...
</div>

的CSS：

.table {
    display: table;
    width: 100%;
    height: 100%;
}

.table .row {
    display: table-row;
}

.table .cell {
    display: table-cell;
    text-align: center;
    overflow: hidden;
    vertical-align: middle;
}

.row.body:nth-child(odd) .cell { 
    background-color:rgb(156,156,156); 
}

.row.body:nth-child(even) .cell {
    background-color:rgb(255,255,255); 
}

.row:last-of-type .cell:last-of-type {
    border-bottom-right-radius:16px; 
}

.row:last-of-type .cell:first-of-type {
    border-bottom-left-radius:6px;
}

.row .cell:last-of-type{ 
    border-right:3px solid rgb(100,0,0); 
}

结果：

如何摆脱或避免这种情况？

为什么不适合手动计算的宽度？ 因为表位于可调整大小的容器中，宽度应该动态计算。查看完整的示例......

目前我无法透露相关因素，我认为这可以使用JavaScript动态计算。

jsfiddle

上的完整示例

Answer 1

这是IE的错误。

解决此问题的最佳方法是定义一行中每个元素的宽度。

例如：

.table .cell {
  display: table-cell;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
  width: /* your desired width in px */
}

当然，不同的细胞会有不同的宽度，所以要自己调整。当然也需要计算。

如果我错了，请纠正我

Answer 2

这是一个IE错误，在使用以下CSS样式时会发生：

border-radius
border-bottom-left-radius
border-bottom-left-radius
border-top-left-radius
border-top-right-radius

要解决此问题，请尝试在您的浏览器上启用IE10模式，方法是在页面中添加以下元标记<meta http-equiv="X-UA-Compatible" content="IE=10" />，或尝试使用以下页面声明禁用怪异模式<!DOCTYPE html>

Source

如何修复IE11中表格单元格之间的白线错误

看起来如何

2 个答案: