1. 前言
CSS中设置单元格（table cell）的高度和宽度自适应是一个非常基础的问题，也是在实际开发中比较常见的需求，每个前端开发者都需要掌握。在本篇文章中，我们将详细介绍CSS中设置单元格高度和宽度自适应的方法和技巧。
2. 设置单元格高度自适应
2.1 设置行高
设置单元格高度自适应的方法有很多种，其中最常用的方法是通过设置行高（line-height）实现，这种方式比较简单直观，适用于单行文本内容比较少的情况。
table td {
line-height: 1.5;
}
通过设置行高，我们可以使单元格自适应其内容的高度，但是要注意每个单元格内的内容尽量保持在一行，否则单元格的高度会随着内容的换行而增加。
2.2 使用百分比值
另一种常用方法是使用百分比值，将单元格高度设置为父元素高度的百分比。
table td {
height: 50%;
}
上面的代码将单元格高度设置为父元素高度的50%。这种方法在单元格内部有多行文本内容时效果更佳，但是要注意，父元素的高度必须已经确定，否则无法正常显示。
3. 设置单元格宽度自适应
3.1 使用百分比值
设置单元格宽度自适应的方法也有很多种，其中最常用的方法是使用百分比值，将单元格宽度设置为父元素宽度的百分比。
table td {
width: 50%;
}
上面的代码将单元格宽度设置为父元素宽度的50%。这种方法适用于单元格内部的内容较少，并且要求单元格宽度自适应父元素的情况。
3.2 使用table-layout
另一种方法是使用CSS中的table-layout属性，将其设置为fixed，然后使用百分比值来设置单元格宽度。
table {
table-layout: fixed;
width: 100%;
}
table td {
width: 50%;
}
上面的代码将table-layout属性设置为fixed，这样可以使单元格宽度自适应父元素的宽度。然后将单元格宽度设置为父元素宽度的50%。这种方法适用于单元格内部的内容较多，并且要求单元格宽度自适应父元素的情况。
4. 总结
到这里，我们已经学习了如何设置单元格高度和宽度自适应。在实际开发中，我们可以根据实际需求选择不同的方法。需要注意的是，如果单元格内部的内容较多，使用百分比值可能会出现内容排列不整齐的情况，此时应该使用table-layout属性来实现宽度自适应。