如何使元素填充表格行

Question

我有一個表格行中的元素<select> </select>，其中一些<option> </option>。我希望此選擇填充所有行空間導致其他一些<input type = "text">使行大於最初的<select>寬度。

這裏是我的代碼向您展示的空間差距：

<table> 
    <tr> 
     <td> 
      <input type = "text" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <select> 
       <option value = "option1" >value 1</option> 
       <option value = "option2" >value 2</option> 
      </select> 
     </td> 
    </tr> 
</table> 

如果要複製這個代碼，你會清楚地看到這個元素之間的差異。我該怎麼做才能使它們寬度相同？

Answer 1

在最簡單的情況下，寬度添加到select元素：

td { 
 
    border: 1px dotted blue; 
 
    } 
 
select { 
 
    width: 100%; 
 
    }

<table> 
 
    <tr> 
 
     <td> 
 
      <input type = "text" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <select> 
 
       <option value = "option1" >value 1</option> 
 
       <option value = "option2" >value 2</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 2

的<select>寬度只需設置到100%如下：

*{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
select{ 
 
width:100%; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <input type = "text" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <select> 
 
       <option value = "option1" >value 1</option> 
 
       <option value = "option2" >value 2</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 3

只需添加width: 100%選擇元件：

table tr td select{ 
 
    width: 100%; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <input type = "text" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <select> 
 
       <option value = "option1" >value 1</option> 
 
       <option value = "option2" >value 2</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 4

你也可以像這樣在CSS設置元素寬：

input, select { 
    width : 100px; 
}