html - 单元格的 CSS 表格边距

Question

我想要一个表格，其布局为左浮动单元格、右浮动单元格和居中的中间单元格。

示例:

问题:当中间单元格内的数据增加时，它会更多地向左移动，从而减少我想要的单元格之间的边距。

示例:

代码:

.settings {
  /*background: #636969;*/
  width: 750px;
  margin: 0 auto;
  padding: 1em;
}
.settings h4 {
  padding: 1em 0;
  letter-spacing: 1px;
  border-bottom: 1px solid #cacece;
}
.settings table {
  width: 100%;
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 200;
}
.settings tr {
  border-bottom: 1px solid #cacece;
}
.settings td {
  padding: 0.5em 0;
}
.settings .edit {
  text-align: right;
}

<!-- start settings -->
<div class='settings'>
  <h4>Account Settings</h4>
  <table class='options'>
    <tr>
      <td class='name username'>Name</td>
      <td class='value'>Robert Rocha</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name email'>Email</td>
      <td class='value'>unitedstatesofamerica@gmail.com</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name pword' colspan='2'>Password</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
  </table>
</div>
<!-- end settings -->

Fiddle

Answer 1

只需将 table-layout:fixed 添加到您的 table

.settings {
  /*background: #636969;*/
  width: 750px;
  margin: 0 auto;
  padding: 1em;
}
.settings h4 {
  padding: 1em 0;
  letter-spacing: 1px;
  border-bottom: 1px solid #cacece;
}
.settings table {
  width: 100%;
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: 200;
  table-layout: fixed;
}
.settings tr {
  border-bottom: 1px solid #cacece;
}
.settings td {
  padding: 0.5em 0;
}
.settings .edit {
  text-align: right;
}

<div class='settings'>
  <h4>Account Settings</h4>
  <table class='options'>
    <tr>
      <td class='name username'>Name</td>
      <td class='value'>Robert Rocha</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name email'>Email</td>
      <td class='value'>unitedstatesofamerica@gmail.com</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
    <tr>
      <td class='name pword' colspan='2'>Password</td>
      <td class='edit'><a href='#'>Edit</a>
      </td>
    </tr>
  </table>
</div>