css td会被内容撑高

CSS中，给table中的td添加一些样式时，我们有时候会发现一个问题：当我们给td设置了高度，但是里面的内容却把它撑高了，导致td并没有按照我们期望的高度显示。

造成这个问题的原因是td的高度默认是由其中的内容撑开的，而不是由我们手动设置产生的。如果我们在CSS中为td设置了固定高度，但内部的内容超过了这个高度，则td实际的高度将自动增加以容纳额外的内容。

td {
  height: 50px;
  overflow: hidden;
}

上述代码中，我们给td设置了固定高度和overflow:hidden属性。这可以在一定程度上解决td被撑高的问题，但是内容仍然会被裁剪，不会完整地显示出来。

解决这个问题的方法是为td内的内容添加一个包裹元素，并在CSS中给这个元素设置高度和overflow:auto属性。这样，当内容超出包裹元素的高度时，便会自动添加滚动条，而不是撑高td。

td {
  height: 50px;
}

td .wrap {
  height: 100%;
  overflow: auto;
}

上述代码中，我们为td新增了一个包裹元素.wrap，并给它设置了高度和overflow:auto属性。这样，我们就可以让td按照我们期望的高度显示，并且内容也可以通过滚动条来查看。