<div> 模擬 table 是指使用 div 元素和 CSS 屬性來模擬表格布局的效果。相比于使用傳統的 HTML 表格標簽（如 <table>、<tr>、<th>、<td>），使用 div 可以更加靈活地控制布局和樣式，使網頁更加美觀和易于維護。下面將通過幾個代碼案例來詳細解釋說明如何使用 div 模擬表格布局。
1. 簡單表格布局
<div> <div class="table-row"> <div class="table-cell">1</div> <div class="table-cell">2</div> <div class="table-cell">3</div> </div> <div class="table-row"> <div class="table-cell">4</div> <div class="table-cell">5</div> <div class="table-cell">6</div> </div> </div> <style> .table-row { display: flex; }
.table-cell { flex-basis: 33%; border: 1px solid black; padding: 10px; } </style>
2. 帶表頭的表格布局
<div> <div class="table-row table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> </div> <div class="table-row"> <div class="table-cell">1</div> <div class="table-cell">2</div> <div class="table-cell">3</div> </div> <div class="table-row"> <div class="table-cell">4</div> <div class="table-cell">5</div> <div class="table-cell">6</div> </div> </div> <style> .table-header { background-color: #ccc; } </style>
3. 響應式表格布局
<div> <div class="table-row table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> </div> <div class="table-row"> <div class="table-cell">1</div> <div class="table-cell">2</div> <div class="table-cell">3</div> </div> <div class="table-row"> <div class="table-cell">4</div> <div class="table-cell">5</div> <div class="table-cell">6</div> </div> </div> <style> .table-row { display: flex; flex-wrap: wrap; }
.table-cell { flex-basis: 33%; border: 1px solid black; padding: 10px; }
@media (max-width: 600px) { .table-cell { flex-basis: 50%; } } </style>
來說，使用 div 模擬 table 可以更加靈活地控制表格布局和樣式，使網頁更加美觀和易于維護。通過設置 div 的 display 屬性為 flex，可以實現水平排列；通過設置 flex-basis 屬性可以調整單元格寬度；通過添加類或者使用媒體查詢可以實現表頭和響應式布局等功能。希望以上幾個案例能夠幫助大家更好地理解和應用 div 模擬 table 的布局技巧。
1. 簡單表格布局
<div> <div class="table-row"> <div class="table-cell">1</div> <div class="table-cell">2</div> <div class="table-cell">3</div> </div> <div class="table-row"> <div class="table-cell">4</div> <div class="table-cell">5</div> <div class="table-cell">6</div> </div> </div> <style> .table-row { display: flex; }
.table-cell { flex-basis: 33%; border: 1px solid black; padding: 10px; } </style>
上面的代碼實現了一個簡單的 2x3 表格布局。通過設置 .table-row 的 display 屬性為 flex，使其內部的元素水平排列。每個單元格通過 .table-cell 類來定義，使用 flex-basis 屬性控制每個單元格的寬度為表格寬度的 1/3。
2. 帶表頭的表格布局
<div> <div class="table-row table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> </div> <div class="table-row"> <div class="table-cell">1</div> <div class="table-cell">2</div> <div class="table-cell">3</div> </div> <div class="table-row"> <div class="table-cell">4</div> <div class="table-cell">5</div> <div class="table-cell">6</div> </div> </div> <style> .table-header { background-color: #ccc; } </style>
上述代碼增加了一個帶有表頭的表格布局。通過在 .table-row 中添加 .table-header 類，為表頭行設置背景顏色。這樣就可以區分表頭行和內容行，并提高可讀性。
3. 響應式表格布局
<div> <div class="table-row table-header"> <div class="table-cell">Header 1</div> <div class="table-cell">Header 2</div> <div class="table-cell">Header 3</div> </div> <div class="table-row"> <div class="table-cell">1</div> <div class="table-cell">2</div> <div class="table-cell">3</div> </div> <div class="table-row"> <div class="table-cell">4</div> <div class="table-cell">5</div> <div class="table-cell">6</div> </div> </div> <style> .table-row { display: flex; flex-wrap: wrap; }
.table-cell { flex-basis: 33%; border: 1px solid black; padding: 10px; }
@media (max-width: 600px) { .table-cell { flex-basis: 50%; } } </style>
上述代碼實現了一個響應式表格布局，當窗口寬度小于 600px 時，單元格的寬度會變為表格寬度的 1/2，以適應較小的屏幕。通過使用 @media 查詢和媒體查詢，可以輕松實現網頁的響應式布局。
來說，使用 div 模擬 table 可以更加靈活地控制表格布局和樣式，使網頁更加美觀和易于維護。通過設置 div 的 display 屬性為 flex，可以實現水平排列；通過設置 flex-basis 屬性可以調整單元格寬度；通過添加類或者使用媒體查詢可以實現表頭和響應式布局等功能。希望以上幾個案例能夠幫助大家更好地理解和應用 div 模擬 table 的布局技巧。