漂亮的页面总是让人心旷神怡，层次清晰的页面让用户操作起来也是易于上手及展示。

如下的页面展示就是非常low的：用户根本阅读其中的数据。

在这个页面，根据用户填写过程生成多次填写记录，如果不进行层次性的展示，数据可读性极其差，如何解决呢？

以下为优化后调整后的展示：

 解决方案：

1、封装行元素展示的数据

 2、调整CSS样式：

white-space取值参考：

    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
    nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。
    pre-wrap 保留空白符序列，但是正常地进行换行。
    pre-line 合并空白符序列，但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。