div 仿table 是指利用div元素和CSS樣式來實現類似于表格的布局。傳統的HTML表格功能有限，且樣式定制較為繁瑣。而使用div 仿table 可以更加靈活地實現表格布局，同時使代碼更易維護。下面將通過幾個代碼案例來詳細解釋。

案例一：簡單表格布局

，我們可以創建一個包含表頭和內容的簡單表格布局。下面是該布局的HTML代碼：

<div class="table">
<div class="table-row">
<div class="table-header">姓名</div>
<div class="table-header">年齡</div>
</div>
<div class="table-row">
<div class="table-cell">張三</div>
<div class="table-cell">20</div>
</div>
<div class="table-row">
<div class="table-cell">李四</div>
<div class="table-cell">22</div>
</div>
</div>

然后，我們可以利用CSS樣式對該表格進行布局和美化。

.table {
display: flex;
flex-direction: column;
}
<br>
.table-row {
display: flex;
}
<br>
.table-header, .table-cell {
flex: 1;
padding: 8px;
text-align: center;
border: 1px solid #ccc;
}

上述代碼中，我們使用display: flex來實現表格的布局，并利用flex-direction: column來讓每一行成為一列。使用.flex屬性讓表頭和內容均等寬，同時使用padding和border屬性來美化。通過調整這些樣式，我們可以實現更多樣式的表格布局。

案例二：響應式表格布局

，我們可以創建一個響應式的表格布局，使表格在不同屏幕大小下能夠自適應。下面是該布局的HTML代碼：

<div class="table">
<div class="table-row">
<div class="table-header">姓名</div>
<div class="table-header">年齡</div>
</div>
<div class="table-row">
<div class="table-cell">張三</div>
<div class="table-cell">20</div>
</div>
<div class="table-row">
<div class="table-cell">李四</div>
<div class="table-cell">22</div>
</div>
</div>

接著，我們可以利用CSS媒體查詢來設定不同屏幕下的樣式。

@media screen and (max-width: 768px) {
.table-row {
flex-direction: column;
}
}

上述代碼中，我們使用@media screen來針對不同屏幕設備使用不同的樣式。在max-width為768px以下的情況下，我們將.table-row的flex-direction屬性設為column，從而實現表格的縱向排列。

案例三：列寬自適應

最后，我們可以實現列寬自適應的表格布局。下面是該布局的HTML代碼：

<div class="table">
<div class="table-row">
<div class="table-header">姓名</div>
<div class="table-header">年齡</div>
</div>
<div class="table-row">
<div class="table-cell">張三</div>
<div class="table-cell">20</div>
</div>
<div class="table-row">
<div class="table-cell">李四</div>
<div class="table-cell">22</div>
</div>
</div>

接下來，我們可以通過CSS樣式讓列寬自適應內容長度。

.table-row {
display: table-row;
}
<br>
.table-row .table-header, .table-row .table-cell {
display: table-cell;
padding: 8px;
text-align: center;
border: 1px solid #ccc;
}

上述代碼中，我們使用display: table-row和display: table-cell來將div元素模擬成表格的行和單元格。這樣，每列的寬度將根據內容長度自適應調整。

通過上述幾個案例，我們可以看出div 仿table 可以靈活地實現各種樣式的表格布局，且易于維護和修改。希望本文能對你理解和使用div 仿table 有所幫助。