上次，我們在【html】用css在input輸入框左邊或右邊加入圖示使用 position 及 padding，在 input 輸入框的左右兩邊加入了 icon 及 button。

這次我們換個作法，嘗試用 table 來達成一樣的效果。

基本思路是先建構一個 table，加入三個欄位，並分別在三個欄位中置入 icon、input、button。

使用 table 的好處是，table 跟 td 具有一定的約束力，可以保證各元件之間的相對位置不變，維持版型，並自動適配所有大小的螢幕。

在這個範例中，如果將 input 的 width 調大，icon 跟 button 也會自動調整到適當的位置，不會像上個範例一樣牽一髮動全身。

此外，也可以依需求替換元素，例如將單純的 +886 文字改成下拉選單。

開發過程中，如果想更清楚地觀察 table 跟 td 的狀態，可以在這兩個元素上加入 border，如此便能直覺地調整版型。

有任何問題歡迎留言～

希望有幫助到你！