css tr 高度自适应

在前端开发中，经常使用 CSS 来进行页面的样式设计，而表格作为页面布局中非常基础的部分，也需要用 CSS 进行样式处理。其中，tr 单元格高度自适应就是一个常见需求。

通常情况下，表格的单元格高度是由其中内容的高度决定的。但是，如果表格中某一行的内容过多，导致其高度超过了其他行，那么这个表格就会显得十分奇怪。此时，我们就需要通过 CSS 设置 tr 单元格高度自适应。

在 CSS 中，设置 tr 单元格高度自适应需要使用两个属性，分别是display: table-row; 和height: auto; 。其中，display: table-row; 属性表示这个元素是表格中的一行，而height: auto; 属性表示其高度自适应，根据内容自动进行调整。

tr {
    display: table-row;
    height: auto;
}

上述代码会使所有表格行的高度自适应。如果只想针对某一行进行设置，可以使用 CSS 选择器指定目标行。

tbody tr:last-child {
    display: table-row;
    height: auto;
}
    

上述代码会使表格中最后一行的高度自适应。通过这种方式，我们可以在保证表格美观的同时，让其内容更加清晰易读。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！