javascript - table rowspan跨行 某列单元格不均分(神奇的问题!求解!)
怪我咯
怪我咯 2017-04-11 11:59:34
[JavaScript讨论组]

更新:这是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;
}

下面是在移动端上表格的表现:

相关敏感信息已隐藏,如果有碍理解问题,可留言询问下

谢谢各位大神!!!!!!!

问题:
1、为什么第一列四个单元格不均分高度?
2、怎样让第一列四个单元格均分高度?

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(2)
天蓬老师

内容撑开的啊

ringa_lee

坐等,大神。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号