【CSS】table rowspan跨行某列单元格不均分（神奇的问题！求解！）

Z时代
2024-01-10
分类：技术分享

更新：这是stackoverflow上查询到的相关信息：

http://stackoverflow.com/ques...

里面明确了这是safari的一个bug，提的方案是如果能知道/预测到跨行项的高度，就可以设置tr为这个高度除以四

但是在我这里不适用，因为这块内容是用户填写的，我并不知道高度会是多少。

我也想过用js去控制，但是这个页面不只是有这一个table，并不是所有table都是这样的问题，没办法去知道哪个表格会出现这样的问题并用js去修改tr的高度。

跪等大神！！！

更新：刚才发现这是在ios下才会出现的问题，android的表现是第一列四个单元格均分高度

原问题：

table在移动端的表现问题，请教各位大神！

table代码如下：
图片描述

tbody标签里面四行两列，第一行第二列的单元格跨四行，rowspan="4"

相关css代码如下：

table {
  margin-bottom: 0.4rem;
  border-collapse: collapse;
  width: 100%;
  background: white;
}
thead td {
  background: #c30d0d;
  color: white;
  white-space: nowrap;
  border: 1px solid #c0c0c0;
}
td {
  border: 1px solid #d2d2d2;
  text-align: center;
  color: #111111;
  padding: 0.1rem;
  font-size: 0.24rem;
}
tbody td.isEdit {
  text-indent: 2em;
  text-align: left;
}
td textarea {
  padding: 0 .1rem;
  color: #535353;
}
textarea::-webkit-input-placeholder {
  color: #535353;}