CSS的表格中,tr(行)和td(列)元素的高度很重要。
在表格中,每個td元素可以包含不同數(shù)量的文本或元素,這將導(dǎo)致每個td的高度不同。
如果我們希望行中的每個td元素都有相同的高度,該怎么辦?
table { width: 100%; /* 表格占滿容器 */ border-collapse: collapse; /* 單元格邊框合并 */ } td { padding: 10px; /* 單元格內(nèi)邊距 */ vertical-align: top; /* 垂直對齊方式 */ }
上述代碼將所有的td元素設(shè)置為具有相同的內(nèi)邊距和垂直對齊方式。但這并不能保證它們的高度相同。
為了確保所有td元素的高度相同,我們需要為tr元素設(shè)置height屬性。
tr { height: 50px; /* 行高 */ }
現(xiàn)在,每個td元素都具有相同的高度,因為它們是包含在具有相同高度的tr元素中的。
此外,如果我們希望表格具有水平和垂直居中的內(nèi)容,可以使用以下代碼:
table { display: flex; justify-content: center; align-items: center; }
這將使表格中的內(nèi)容在水平和垂直方向上均勻居中。