适合TH单元格内的选择字段

时间:2014-04-24 13:39:16

标签: javascript php css html-table

我在PHP中有一个函数来根据MySQL查询的结果创建一个表。 我还添加了一个javascript类来根据列过滤行,但是这个函数创建了一个隐藏的选择,每个列都有唯一的数据。 当我显示那些选择字段时,它们会改变列的宽度,但是它们的宽度来自TD单元格的内容,而不是来自select ...

为什么我限制选择字段以适应TH单元而不改变其宽度?

<table>
<thead>
<tr>
<th>Index
<th>Column 1 <br> <select><option>Ble</option><option>Bigger</option></select>
<th>Col2 <br> <select><option>Bla</option><option>Big option blablabla</option></select>
</tr>
</thead>
<table>

我试过CSS:

选择{  宽度:100% }

aditional的:

<th class="table-sortable:alphanumeric table-filterable table-sortable" table-sortable:alphanumeric="" table-filterable="" title="Click to sort">Resposta
<br><select onchange="Table.filter(this,this)" onclick="Table.cancelBubble(event)" class="table-autofilter" style="display: inline-block;">
<option value="">Filter: All</option>
<option value="1">1</option>
<option value="NAO">NAO</option>
<option value="SEPLAG">SEPLAG</option>
<option value="SIM">SIM</option>
</select>
</th>

打印示例:https://www.dropbox.com/s/cah2igqt40kq0vm/tables.png

好的,解决了......

我刚刚添加了选择字段CSS:

margin: 0 -45 0 -45;

1 个答案:

答案 0 :(得分:1)

您可以为选择标记添加样式:

<select style="width:300px;">

这会将select的宽度设置为300px。如果你使用

<select style="width:100%;">

它会将选择宽度设置为它的父级(&lt; th&gt;)留下的可用空间。

此致