dl dt dd 的边框线条CSS设置

亮术网 2017-03-11 本网原创

  由于 table 加载完整个表格后才显示,如果表格比较长网速又慢,用户需要等待很长时间才能看到网页,如果网速特别慢时连一个页面都加载不完就超时了,那么用户连网页是什么样都看不到;所以现在前端设计都不用 table 了,在必须用 talbe 的地方用它的替代都 dl dt dd。dl dt dd 跟其它 html 标签(div、ul li 等)一样加载多少显示多少,不用等到所有内容加载完才显示,这就大大加快了显示速度。

  dl dt dd 虽然用来制表格的但跟 table 不一样,它不会默认显示边框,行与行、列与列之间也不会显示线条,这些都需要在 CSS中设置,并且每行要定义一个具体的高度,否则上边与下边会重合。

 

  dl dt dd 的边框线条CSS设置举例

  用 dl dt dd 制作表格,除要设置四边的线条外还要设置每行和每列的线条,这里面有个重复的问题,即第一行的上边是表格的上边,第一行的下边是第二行的上边;第一列的左边是表格左边,第一列的右边是第二列的左边;这些重复的部分设置一次即可,否则线条会变粗而不美观。

  看似复杂的边框重复问题其实很好解决,首先定义表格的四边,然后只定义行的下边、上边不定义,这样只会出现最后一行的下边与表格的底边重复,最后一行不定义下边问题不就解决了;列跟行也一样,只定义列的右边不定义左边,只会出现最后一列的右边与表格的右边重复,最后一列的右边不定义即可。

  假如有 dl dt dd 如下:

  <dl class="dltable">
   <dt>第一行第一列</dt><dd>第一行第二列</dd>
   <dt>第二行第一列</dt><dd>第二行第二列</dd>
   <dt>第三行第一列</dt><dd>第三行第二列</dd>
  </dl>

  CSS设置如下:

   .dltable{border:1px solid gray;}
   .dltable dt{border-bottom:1px solid gray; border-right:1px solid gray; height:32px; width:120px; float:left;}
   .dltable dd{border-bottom:1px solid gray; height:32px;}
   .dltable dt.last{border-bottom:none;}
   .dltable dd.last{border-bottom:none;}

  以上定义只是两行两列的情况,这种情况是用得比较多的提交数据的表格;大于两列的情况还需要另外定义CSS,如 dd 需要添加右边和浮动,最后一列需要消除浮动。当然,定义多行的表格也可以用 ul li。

本文浓缩标签:dl dt dd边框CSS