html - float :left change td width

Question

fiddle :

https://jsfiddle.net/nwcb1gwk/

当我申请 float: left; display: block;到 <td> , 宽度 <td>是零钱(第三 block 在外面)。

我需要应用它来使用 overflow: hidden。

如何使用 float 使第二个表的大小完全相同？

.One {
  float: left;
  display: block;
  //padding: 0px;
}

.All {
  outline: 1px dotted lightgrey;
  width: 50px;
  background-color: blue;
}

div {
  width: 150px;
  zoom: 400%;
  background-color: yellow;
}

table {
  border-spacing: 0;
}

<div>
  <table>
    <tr>
      <td class='All One'>X</td>
      <td class='All One'>X</td>
      <td class='All One'>X</td>
    </tr>
  </table>
</div>

<div>
  <table>
    <tr>
      <td class='All'>X</td>
      <td class='All'>X</td>
      <td class='All'>X</td>
    </tr>
  </table>
</div>

Answer 1

尝试给你的表 display:table 和你的 td 的 display:table-cell 并且你不需要其他代码。这是我认为您需要的所有 CSS；

table {
display: table;
}

.One {
display: table-cell;
//padding: 0px;
}

.All {
outline: 1px dotted lightgrey;
width: 50px;
background-color: blue;
}