Question

小提琴：

当我将float: left; display: block;应用于<td>时，<td>的宽度会发生变化（第三个区域在外面）。

我需要将此应用于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;
}

Answer 2

您可以将其添加到类.One

box-sizing: border-box;

这将包括您的1px轮廓，宽度为50px的td。默认情况下，它是box-sizing：content-box;这意味着宽度和边框是分开的。

Answer 3

我为你准备了一个解决方案..

试试这个

<html>
<head>
<style>

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

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

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

table {
  border-spacing: 0;
}
</style>
</head>


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

它肯定会对你有用..谢谢

浮动：左侧改变td宽度

3 个答案: