问一个div+css布局引起的表格边框问题

我讲一个表格转化为div+css的格式进行布局，目前来讲一切顺利，但是使用的时候却发现，如果某一个单元格(div)因为文字容量而进行换行，那么只有那一个单元格的边框变长，但是其他同行元素的单元格边框还是很短，看起来很难看，请问一下解决办法，谢谢……

css代码：

.perdata{
display:table-row;
width:900px;
height:25px;
padding:2px 0 0px 0;
float:left;
word-break:normal;
border-bottom:#E8E8E8 1px solid;
vertical-align:middle;
}

.perdata .data2{
display:table-cell;
position:fixed;
width:12%;
float:left;
border-right:#E8E8E8 1px solid;
height:20px;
padding-top:5px;
vertical-align:text-top;
}

页面代码：
<div class="perdata">
<div class="data2">序号</div>
<div class="data2">文档分组编号</div>
<div class="data2">文档分组代码</div>
<div class="data2">订单代码</div>
<div class="data2">中文名称</div>
<div class="data2">英文名称</div>
<div class="data2">有效性</div>
<div class="data2">操作</div>
</div>

7 个解决方案

#1

样式里加上
overflow:hidden;
试试

#2

寒……但是这样连数据显示都不能正常，违背了最初的初衷……现在的解决办法是overflow:auto;不过也是自欺欺人的一个方法……继续等各位指点！

#3

寒一个自己的愚蠢，height:100%直接搞定…… -o-

#4

我以为是你的高度的问题，看错了~~
hoho~``````

#5

楼主，div+css布局，不是说把所有的表格都换成div，而是指，表格不要参与页面的外观布局的表现，而是去做他该做的事----放置数据内容。

看你写的页面的内容，应该是个表格的表头部分吧？
你把该用表格来做的事也变成div，有些过了，呵呵。

#6

楼上的没有有看过163和淘宝的？
他们可是没有一个表格的，完全用Div+CSS做的。
建议楼主去看看他们的源代码。
我也准备研究一下。

#7

<style>
.perdata{
display:table-row;
width:900px;
height:25px;
padding:2px 0 0px 0;
float:left;
word-break:normal;
border-bottom:#E8E8E8 1px solid;
vertical-align:middle;
}

.perdata .data2{
display:table-cell;
position:fixed;

float:left;
border-right:#E8E8E8 1px solid;
height:20px;
padding-top:5px;
vertical-align:text-top;
}

</style>