在Web開發中,表格是一種常見的數據展示形式。而表格中每列的寬度通常是需要精心設計的,以保證數據的清晰可讀性。然而,不同的屏幕尺寸和分辨率對表格的展示也有不同的要求。傳統的表格設計可能難以達到自適應的效果,而jQuery提供了一種簡單有效的解決方案。
$(window).resize(function(){ var tableWidth = $('table').width(); //獲取表格寬度 var availableWidth = tableWidth - $('th:first').width(); //計算可分配寬度 var colNum = $('thead th').length - 1; //獲取列數 var avgWidth = availableWidth / colNum; //計算平均寬度 $('tbody tr').each(function(){ //遍歷表格行 $(this).find('td').each(function(index){ //遍歷行內單元格 if(index > 0){ //忽略第一個單元格 $(this).width(avgWidth); //設置單元格寬度 } }); }); });
上述代碼使用了一個resize事件,即屏幕尺寸變化時觸發。首先,通過jQuery選擇器獲取表格的總寬度和列數。然后,計算出可分配寬度和平均寬度。最后,遍歷表格行和單元格,設置每個單元格的寬度為平均寬度。
通過這樣的設置,表格每個單元格的寬度將會自適應屏幕的變化,以達到最佳展示效果。
上一篇div focus
下一篇div float 底部