FireFox中的表格渲染不正确

Question

刷新表时，A table的格式会损坏，但在调整大小时可以正常工作。

我尝试在Chrome，IE和Edge中运行相同的代码，而没有出现此类问题。

处理表格式的SASS是以下片段：

output application/json
var payload = [  
    {"name":"Ram", "email":"Ram@gmail.com", "state": "CA","age":21},  
    {"name":"Bob", "email":"bob32@gmail.com","state": "CA","age":30},
    {"name":"john", "email":"bob32@gmail.com","state": "NY","age":43} 

] 
---
payload reduce ((item, consent = []) -> consent +
{
    (state: item.state) if(item.state=='CA'),
    (age: item.age) if(item.age >25)
}
)

表本身如下所示：

.cv-table {
  border-collapse: separate;
  border-spacing: 0 $line-spacing;
}

.cv-section-cell {
  text-align: center;
  vertical-align: middle;

  border-right: thin solid #000;
  padding: $line-spacing / 2;

  margin: 0;

  span {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }
}

这是重新加载页面之前的样子：

这就是它的样子：

Answer 1

为td赋予一些宽度和高度

将此CSS添加到您的课程中可能对您有用

 .cv-section-cell {
          width: 1.5em;
          height: 1.5em;
       }

在Firefox https://jsfiddle.net/fwz7k20q/4/中打开小提琴