更新:这是stackoverflow上查询到的相关信息:
里面明确了这是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;
}
下面是在移动端上表格的表现:
相关敏感信息已隐藏,如果有碍理解问题,可留言询问下
谢谢各位大神!!!!!!!
问题:
1、为什么第一列四个单元格不均分高度?
2、怎样让第一列四个单元格均分高度?