CSS表格是我們在網頁設計中最常用的HTML元素之一。而如何讓表格隨著瀏覽器窗口大小變化而自適應呢?這里我們可以使用CSS3中的Flexbox布局來實現表格的橫向自適應。下面就來看一看具體實現方法。
/*CSS3 Flexbox布局實現自適應表格*/ .table-container { display: flex; /*設置父容器為Flex布局*/ flex-wrap: wrap; /*強制換行*/ } .table-container table { width: 100%; /*設定表格寬度為100%*/ border-collapse: collapse; /*合并邊框*/ } .table-container td, .table-container th { padding: 10px; /*設置單元格內邊距*/ border: 1px solid #ccc; /*設定邊框樣式*/ text-align: center; /*設定文字居中對齊*/ flex: 1; /*設置單元格自適應大小*/ }
上述代碼中,我們首先將包含表格的容器設置為Flex布局,通過flex-wrap屬性強制換行,保證表格可以在窄屏幕上自適應布局。接著,我們設置表格的寬度為100%,并使用border-collapse屬性將表格邊框合并。最后,我們通過設置單元格的flex屬性為1,讓單元格自適應父容器的寬度。這樣就可以在不同窗口大小下自適應展示表格。