<div> 填滿 <td> 元素是一個常見需求，在前端開發中經常會遇到。在 HTML 中，<div> 是一個常用的容器元素，可以用于包裹其他的元素。而 <td> 則是 HTML 表格中的一個單元格元素，用于顯示表格中的數據。當我們想要把一個 <div> 元素放置在一個 <td> 元素中，并讓它填滿整個單元格，就需要使用一些 CSS 技巧來實現。本文將給出一些代碼案例，詳細解釋如何實現 <div> 填滿 <td> 的效果，并參考一些真實案例進行說明。

第一種常見的方法是使用絕對定位。通過設置 <div> 的 CSS 屬性 position 為 absolute，可以將其脫離文檔流，并通過設置 top、bottom、left、right 等屬性來確定它在父元素中的位置。下面是一個示例代碼：

<td style="position: relative;">
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
</td>

上述代碼中，我們給 <td> 設置了 position: relative，這樣可以讓其成為 <div> 絕對定位的參照點。而 <div> 的 position 被設置為 absolute，通過設置 top、bottom、left 和 right 為 0，可以讓它填滿整個 <td> 元素。

第二種常見的方法是使用 CSS Flexbox。Flexbox 是一種 CSS 布局模式，可以方便地實現自適應布局。下面是一個示例代碼：

<td style="display: flex;">
<div style="flex: 1;"></div>
</td>

上述代碼中，我們給 <td> 設置了 display: flex，這樣它的所有子元素都會成為 Flex 容器，并按照 Flexbox 的規則進行布局。而 <div> 的 flex 屬性被設置為 1，表示它占據剩余空間的比例為 1，即填滿整個 <td> 元素。

除了上述兩種方法外，還有其他一些方法可以實現 <div> 填滿 <td> 的效果。比如使用 table 布局、使用 CSS Grid、使用 JavaScript 等。具體使用哪種方法取決于具體的需求和開發環境。

參考真實案例，我們可以看到這種需求在實際項目中經常出現。比如在一個電商網站的商品列表頁中，每個商品信息通常都是放在一個 <td> 元素中，而商品圖片是通過 <div> 元素展示的。為了讓商品圖片能夠填滿整個單元格，并保持響應式布局，在樣式上可以使用上述提到的方法來實現。

總之，在前端開發中，要實現 <div> 填滿 <td> 元素是一個常見需求。本文介紹了兩種常見的方法，分別是使用絕對定位和使用 CSS Flexbox。通過參考真實案例，我們可以看到這種需求的實際應用。在實際開發中，根據具體的需求和開發環境選擇合適的方法進行實現，可以幫助我們更好地完成前端任務。