CSS的表格中,tr(行)和td(列)元素的高度很重要。
在表格中,每个td元素可以包含不同数量的文本或元素,这将导致每个td的高度不同。
如果我们希望行中的每个td元素都有相同的高度,该怎么办?
table { width: 100%; /* 表格占满容器 */ border-collapse: collapse; /* 单元格边框合并 */ } td { padding: 10px; /* 单元格内边距 */ vertical-align: top; /* 垂直对齐方式 */ }
上述代码将所有的td元素设置为具有相同的内边距和垂直对齐方式。但这并不能保证它们的高度相同。
为了确保所有td元素的高度相同,我们需要为tr元素设置height属性。
tr { height: 50px; /* 行高 */ }
现在,每个td元素都具有相同的高度,因为它们是包含在具有相同高度的tr元素中的。
此外,如果我们希望表格具有水平和垂直居中的内容,可以使用以下代码:
table { display: flex; justify-content: center; align-items: center; }
这将使表格中的内容在水平和垂直方向上均匀居中。