html - 为什么表格的内部元素的宽度不固定，即使它给定了一个固定的数字？

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

您可以使用 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>