为什么表格的内部元素的宽度即使被赋予固定的数量也不能固定？

Question

我有这样的DOM结构：

div#holder > table > tbody > tr > td

我已将td指定为15px的固定宽度。但是当我调整#holder的宽度大小时，td的宽度改变了。

我想知道：

1. 为什么给定的数字不予裁定？
2. 如何固定td的宽度？

谢谢

setInterval(function(){
  var w = 300*Math.random();
  $('#holder').css('width', w + 'px');
},500)

td {
width:15px;
height:50px;
background:#f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
  <table>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

setInterval(function(){
  var w = 300*Math.random();
  $('#holder').css('width', w + 'px');
},500)

发生这种情况是因为您编写了Javascript。 在这种情况下，td会适应父表的宽度（#holder），并且每隔0.5秒就会更改15px的静态宽度。 如果您对td使用max-width：15px而不是width：15px。那么根据您的代码，只有表格宽度会发生变化，而您的td将保持15px固定，问题将得到解决。

td{
max-width:15px;
height:50px;
background:#f00;
}
#holder{
border:2px solid black;
}

然后，td不会相对于其父对象增大或缩小。 如下所示。

Answer 2

您可以使用min-width和max-width设置元素的精确宽度。您可以在这里查看结果。

setInterval(function(){
  var w = 300*Math.random();
  $('#holder').css('width', w + 'px');
},500)

td {
  min-width: 15px;
  max-width: 15px;
  width: 15px;
  height: 50px;
  background: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
  <table>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>