web表格是网站上常見的元素,它們允許用戶輸入數據。為了確保表格在不同設備和屏幕尺寸上看起來美觀,我們需要讓表的行高度均勻。這裡介紹兩種 來平均web表格的高度:
使用CSS
使用CSS是最簡單的 。我們可以使用 display: table
、table-layout: fixed
和 height: auto
屬性。例如:
table {
display: table;
table-layout: fixed;
height: auto;
}
此代码將確保表中所有行的按內容自動調整高度。
使用JavaScript
如果CSS 不可行,可以嘗試使用JavaScript。我們可以使用以下代碼:
const table = document.querySelector("table");
const rows = table.querySelectorAll("tr");
const heights = [];
// 獲取所有行的高度
for (let i = 0; i < rows.length; i++) {
heights.push(rows[i].offsetHeight);
}
// 計算平均高度
const avgHeight = heights.reduce((acc, curr) => acc + curr, 0) / rows.length;
// 設置所有行的高度
for (let i = 0; i < rows.length; i++) {
rows[i].style.height = ${avgHeight}px ;
}
此腳本將遍歷表中的所有行,獲取它們的高度,計算平均高度,然後將其設置為所有行的高度。
選擇適合您的
選擇哪種 取決於您的具體需求。如果您需要一個簡單的解決方案,CSS 是一個不錯的選擇。如果您需要更靈活的解決方案,JavaScript 更合適。