html dd下边框设置,dl dt dd 的边框线条CSS设置

由于 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 如下：

第一行第一列

第一行第二列

第二行第一列

第二行第二列

第三行第一列

第三行第二列

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。