Question

我希望有一个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;
}
.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

即可

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以为第一列设置固定宽度：

.name { width: 100px; }

见这里：https://jsfiddle.net/dojprwzL/

Answer 3

使用

.settings table{table-layout:fixed;}

或您可以使用百分比（例如

）来使用每个单元格的宽度

        .settings td{word-wrap: break-word;}        
        td:first-child{width:30%;}
        td:nth-child(2){width:40%;}
        td:last-child{width:30%;}

检查Updated Fiddle

Answer 4

您已经为编辑专栏完成了此操作：

@q

这会将编辑列中的内容直接放在右侧。您需要做的只是为其他列添加相同的规则，显然将.settings .edit { text-align: right; }替换为right和left。这就是说你的造型看起来像这样：

center

可以看到一个实例：here。

单元格的CSS表格边距

4 个答案: