如何使元素填充表格行

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; 
}