<正文>在網頁制作中,表格是非常常見的元素。但是很多時候我們做表格的時候,會遇到表格高度自適應的問題。這時候我們就需要通過CSS來對表格進行高度的自適應。
首先,我們需要給單元格設置一個最小高度,這樣可以讓單元格的高度在內容很小時也不會太小。例如:
td { min-height: 20px; }接下來,我們要設置表格高度的自適應。以下是一段實現表格高度自適應的代碼:
table { display: table; width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; } tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } tr { display: table-row; vertical-align: inherit; border-color: inherit; } td { display: table-cell; vertical-align: middle; border-collapse: collapse; }以上代碼中需要注意的是,我們需要將table的寬度設置為100%,這樣可以使表格在任何尺寸下都能適應其容器的大小。同時,我們也需要設置表格的布局方式為fixed,這樣可以讓表格的寬度自適應。另外,在表格單元格td中,我們需要將其布局方式設置為table-cell,以使其以表格單元格的形式來布局。 以上就是實現表格高度自適應的一些方法。趕快試一試吧!
上一篇css 表單元素怎么對其
下一篇css 表格 上下邊框線