论坛首页新手上路 签到
查看: 1176|回复: 0

[产品BUG] 信息变更使用左右布局页面,表单字段长,页面错乱

[复制链接]
金智教育-吴海明

该用户从未签到

8

主题

8

帖子

24

积分

初来乍到

Rank: 1

积分
24
发表于 2020-7-14 09:34:13 | 显示全部楼层 |阅读模式
1.场景:南大信息管理;定制左右页面布局,表单字段4000,手动输入大数据量导致页面错乱。2.问题如图
A.png
3.分析:左右结构页面article定义display:table;
                               nav定义 display:table-cell;
                              section定义 display:table-cell;
4.解决:可以使用table样式,在article标签中加  table-layout: fixed样式;

5.现场教职工信息管理定制的左右布局遇到问题可修改如下代码验证:
B.png C.png
信息变更可修改如下代码验证:
D.png E.png
6.例子:
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. table.one
  5. {
  6. table-layout: automatic
  7. }
  8. table.two
  9. {
  10. table-layout: fixed
  11. }
  12. </style>
  13. </head>
  14. <body>

  15. <table class="one" border="1" width="100%">
  16. <tr>
  17. <td width="20%">100000000000010000000000000000000000000001000000000000000000000000000000000000000000</td>
  18. <td width="40%">10000000</td>
  19. <td width="40%">100</td>
  20. </tr>
  21. </table>

  22. <br />

  23. <table class="two" border="1" width="100%">
  24. <tr>
  25. <td width="20%">10000000000010000000000000000000000000000000000000000000</td>
  26. <td width="40%">10000000</td>
  27. <td width="40%">100</td>
  28. </tr>
  29. </table>

  30. </body>
  31. </html>
复制代码
table-layout: automatic和table-layout: fixed的区别,在与字段列长度超过字段设定宽度是否自动扩展。




您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

Archiver|手机版|小黑屋|江苏金智教育信息股份有限公司 ( 系统管理员:binmeng@wisedu.com  

GMT+8, 2021-3-8 16:51

Powered by Discuz! X3.2

© 2015 Design: www.wisedu.com

快速回复 返回顶部 返回列表