在 TH 单元格内适合选择字段答案

【问题标题】：Fit Select Field inside a TH cell在 TH 单元格内适合选择字段
【发布时间】：2014-04-24 13:39:15
【问题描述】：

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

为什么我要限制选择字段以适应 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% }

附加：

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

【问题讨论】：

注意：您的标签都没有结束标签。
如果您的问题已解决，则可以通过单击该答案旁边的灰色复选标记来接受解决您问题的相关答案（您只能接受对问题的一个答案) 或者，如果您自己解决了问题，请将您的解决方案写成您的问题的答案，然后在强制性的两天等待之后，接受您自己的答案。

标签： javascript php css html-table

【解决方案1】：

您可以为您的选择标签添加样式：

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

这会将选择的宽度设置为 300 像素。如果你使用

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

它将选择宽度设置为其父级（

）留下的可用空间。

问候，

【讨论】：

然后使用相对单位，例如代码的第二个 sn-p 上的 100%。