html表格宽度设置百分比,设置了table-cell 属性后，用百分比来设置宽度为什么会出现问题...

test

p { margin:0; }

.right-content-title111 {border:1px solid black; width:400px; margin-top:15px;}

.right-content-title111 span{

border : 1px solid red;

display: table-cell;

width: 70%;

text-align: center;

height: 22px;

vertical-align: middle;

}

.right-content-title222 {border:1px solid black; width:400px; margin-top:1px;}

.right-content-title222 span{

border : 1px solid red;

display: table-cell;

width: 40%;

text-align: center;

height: 22px;

vertical-align: middle;

}

.right-content-title333 {border:1px solid black; width:520px; margin-top:1px;}

.right-content-title333 span{

border : 1px solid red;

display: table-cell;

width: 10%;

text-align: center;

height: 22px;

vertical-align: middle;

}

短

短

短

中中

中中

中中

长长长

长长长

长长长

结论就是table-cell里的width:3.5%，故意设置很小，目的是让table-cell占总容器100%宽