.right-content-title span{
display: table-cell;
width: 3.5%;
text-align: center;
height: 42px;
vertical-align: middle;
}
加了这个display: table-cell属性后，width的意义是什么呢？
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
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;
}
</style>
</head>
<body>
<p class="right-content-title111"><span>短</span></p>
<p class="right-content-title222"><span>短</span></p>
<p class="right-content-title333"><span>短</span></p>
<p class="right-content-title111"><span>中中</span></p>
<p class="right-content-title222"><span>中中</span></p>
<p class="right-content-title333"><span>中中</span></p>
<p class="right-content-title111"><span>长长长</span></p>
<p class="right-content-title222"><span>长长长</span></p>
<p class="right-content-title333"><span>长长长</span></p>
</body>
</html>结论就是table-cell里的width:3.5%，故意设置很小，目的是让table-cell占总容器100%宽
通常，单元格占用的空间就是它显示内容需要的空间。width 属性用于为单元格设置预定义的宽度。
在 XHTML 1.0 Strict DTD 中，不支持元素的 width 属性。