html表格行中的均匀间隔/可扩展单元格

Question

我希望在我的页面上水平均匀地展开一行固定大小的项目。要做到这一点，我使用的是html表。目前我有一个表格，当页面展开时，单元格会展开，这很棒。但是，第一个元素始终难以对齐，而最后一个元素在它与右边界之间有一个可扩展的空间。我真的不在乎父母的边界与第一个和最后一个元素之间是否存在间距，但我希望它是相同的。

http://jsbin.com/uZUBedA/2/

我错过了什么？

CSS：

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  background: #AAAAFF;
  padding: 12px;
}
tr {
  background: #AAFFAA;
}
td {
  background: #FF4444;
  padding: 4px;
}
div {
  background: #FFAAAA;
  padding: 12px;
}

HTML：

<table>
  <tr>
    <td><div style="width:400px">A large cell</div></td>
    <td><div style="width:200px">A small cell</div></td>
    <td><div style="width:100px">A smaller cell</div></td>
  </tr>
</table>

Answer 1

要使最右侧单元格内的div对齐，请向其添加margin-left:auto：

<table>
    <tr>
       <td><div style="width:400px">A large cell</div></td>
       <td><div style="width:200px">A small cell</div></td>
       <td><div style="margin-left:auto; width:100px">A smaller cell</div></td>
    </tr>
</table>

Answer 2

我建议你为你的项目使用这个css框架。

http://www.blueprintcss.org/

Answer 3

只是一个想法：

FIDDLE

HTML

<div class='numb'></div>
<div class='numb'></div>
<div class='numb'></div>

CSS

.numb {
    height: 50px;
    background-color: red;
    margin-top; 30px;
    float: left;
}
.numb:nth-child(1){
    margin-left: 10%;
    width: 25%;
}
.numb:nth-child(2){
    margin-left: 5%;
    width: 30%;
    margin-right: 5%;
}
.numb:nth-child(3){
    width: 15%;
    margin-right; 10%;
}

您可以根据需要调整百分比，并确保它们加起来大约为100。

---

回应对IE8的担忧。

.numb1 {
    height: 50px;
    background-color: red;
    margin-top; 30px;
    float: left;
    margin-left: 10%;
    width: 25%;
}
.numb2 {
    height: 50px;
    background-color: red;
    margin-top; 30px;
    float: left;
    margin-left: 10%;
    width: 25%;
    margin-left: 5%;
    width: 30%;
    margin-right: 5%;
}
.numb3 {
    height: 50px;
    background-color: red;
    margin-top; 30px;
    float: left;
    margin-left: 10%;
    width: 15%;
    margin-right; 10%;
}