<div>標(biāo)簽是HTML中用來定義一個文檔中的區(qū)域或節(jié)的容器元素。而table標(biāo)簽則是用來定義一個表格的元素。在編寫網(wǎng)頁時，我們經(jīng)常需要使用表格來展示數(shù)據(jù)。而有些時候，我們希望表格能夠根據(jù)屏幕的大小自動拉伸，使得表格的寬度能夠適應(yīng)不同設(shè)備的顯示效果。本文將通過幾個代碼案例來詳細(xì)解釋如何使用div和table標(biāo)簽實(shí)現(xiàn)表格的拉伸效果。
第一個案例是一個簡單的表格布局，通過設(shè)置表格的寬度為100%來實(shí)現(xiàn)表格的拉伸效果。代碼如下所示：

<div style="width: 100%;">
<table style="width: 100%;">
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
</table>
</div>

在這個案例中，通過設(shè)置div標(biāo)簽的寬度為100%，再通過嵌套一個table標(biāo)簽，并設(shè)置table標(biāo)簽的寬度為100%，實(shí)現(xiàn)了表格的拉伸效果。這樣無論屏幕的大小如何，表格都會自動適應(yīng)屏幕的寬度顯示。
第二個案例是一個帶有固定列寬的表格布局，我們可以設(shè)置某些列的寬度固定，而其他列則自動拉伸。代碼如下所示：

<div style="width: 100%;">
<table style="width: 100%;">
<tr>
<th style="width: 100px;">姓名</th>
<th style="width: 50%;">年齡</th>
<th>性別</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
</div>

在這個案例中，我們通過在th標(biāo)簽中使用style屬性來設(shè)置列的寬度。第一個列的寬度為固定的100px，第二列的寬度為50%。因?yàn)槭Ｓ嗟牧袥]有設(shè)置寬度，所以它們會自動拉伸以填滿剩余的空間。
除了上述案例，我們還可以使用CSS樣式來進(jìn)一步定制表格的拉伸效果。例如，我們可以給表格的父元素添加overflow-x: auto;的樣式，使得在表格寬度超過父元素寬度時，出現(xiàn)水平滾動條，方便用戶查看表格中的內(nèi)容。代碼如下所示：

<div style="width: 100%; overflow-x: auto;">
<table style="width: 100%;">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
</div>

在這個案例中，通過給div標(biāo)簽添加overflow-x: auto;樣式，當(dāng)表格的寬度超過div標(biāo)簽的寬度時，會出現(xiàn)水平滾動條，這樣用戶就可以左右滾動查看表格中的內(nèi)容。
總之，使用div和table標(biāo)簽結(jié)合CSS樣式可以實(shí)現(xiàn)表格的拉伸效果。通過設(shè)置表格的寬度為100%、設(shè)置列的寬度，或者使用CSS樣式來定制滾動條，我們可以根據(jù)不同的需求實(shí)現(xiàn)不同的表格布局效果，使得表格能夠適應(yīng)不同設(shè)備的顯示效果。