html - 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>