CSS表格內容平鋪是指將表格單元格中的內容居中并上下左右平鋪展示。使用CSS可以使表格內容呈現更美觀的排版效果。
table { border-collapse: collapse; } td { text-align: center; vertical-align: middle; padding: 1rem; background-color: #fff; border: 1px solid #ccc; box-shadow: 0px 1px 1px #ccc; width: 150px; height: 150px; } td img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; }
以上代碼是一個實現表格內容平鋪的示例。其中,通過設置表格的邊框樣式和合并單元格的方式,實現更統一、美觀的表格視覺效果。在單元格中可以插入多種媒體類型的內容,當內容尺寸大于單元格時,使用均衡縮小或放大的方式,使內容適應單元格大小。
此外,使用padding屬性處理單元格間間距,background-color屬性處理單元格背景色等CSS屬性,可以進一步優化表格內容的呈現效果。
上一篇CSS餅圖動畫效果
下一篇css表格中可填寫文字