表格中的下拉框宽度设置

2019-05-28 186 Lei 0

问题:

让表格中的所有下拉框占据整个单元格,并且单元格长度为该列所有下拉框中最长的那个选项的宽度。

分析:

我们先写一个没有任何样式,不做任何处理的表格,表格中包含了几个下拉框。

<table border="1">
 <tr>
        <td>
            <select>
                <option value="1">北京</option>
            </select>
        </td>
 </tr>
 <tr>
        <td>
            <select>
                <option value="2">测试</option>
                <option value="1">这个可以说是比较长了</option>
            </select>
        </td>
 </tr>
</table>

6a276963bd-1

因为第二行的下拉框包含了一个比较长的option,所以第二行的下拉框宽度也是比较宽的。默认table单元格的宽度就是这个最长的option的宽度。

我们期望的效果是,北京所在的单元格中的下拉框也可以占据整个的单元格,而不是适配option宽度。

我们将select宽度设置为100%即可。

<style type="text/css">
        select{
             min-width: 100%;
        }
</style>

适配所有浏览器。

如果设置最小宽度为100%不起作用。可以使用下面的方法,但是不能适配Edge以及IE。

我们修改一下代码,加一个样式,html代码不变。样式代码如下:

<style type="text/css">
        select{
             min-width: -webkit-fill-available;
        }
</style>


可以看到北京所在的下拉框也填满了整个单元格。

-webkit-fill-available的意思是填满整个可用区域。但是只适用于使用chrome和safari等使用webkit引擎的浏览器。Firefox可以使用-moz-available属性。

可以将样式修改为:

<style type="text/css">
        select{
            min-width: -webkit-fill-available;
            min-width: -moz-available;
        }
 </style>



  0