如何將表格的最後一列擴展到寬度的其餘部分？

Question

這是我的代碼：

.frm-find-people table td:nth-child(1) { 
 
    padding: 5px 15px; 
 
    width: 100px 
 
} 
 

 
.frm-find-people table td:nth-child(2) { 
 
    border: 1px solid red; 
 
}

<form class="frm-find-people"> 
 
    <table> 
 
     <tbody> 
 
      <tr> 
 
       <td>Name</td> 
 
       <td><input type="text" name="name"></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</form>

紅色框（的table第二td）應擴展到寬度的其餘部分。我怎樣才能做到這一點？

Answer 1

由於表格佈局規則，單元格不能小於其內容寬度。所以，你可以設置它的寬度100%，它會嘗試填補無論是由名稱左側單元格：

.label { 
 
    width: 100px; 
 
    padding: 5px 15px; 
 
} 
 

 
.input { 
 
    border: 1px solid red; 
 
    width: 100%; 
 
} 
 

 
.input > input { 
 
    width: calc(100% - 4px); 
 
}

<form class="frm-find-people"> 
 
    <table> 
 
     <tbody> 
 
      <tr> 
 
       <td class="label">Name</td> 
 
       <td class="input"><input type="text" name="name"></td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</form>