I have a function in PHP to create a table based on results from MySQL query. I've also added a javascript class to filter rows based on columns, but this function create an hidden select with unique data for each column. When I show those select fields they change the width of columns, but they're suposed to have the width from the content of TD cells, not from select...
Why do I limit a Select Field to fit the TH cell without change its width?
<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>
I've tried on CSS:
th select { Width: 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>
Print of example: https://www.dropbox.com/s/cah2igqt40kq0vm/tables.png
Ok, solved...
I just added on select fields CSS:
margin: 0 -45 0 -45;
You can add a style to your select tags:
<select style="width:300px;">
This will set the width of the select to 300px. If you use
<select style="width:100%;">
it will set the select width to the available space left by it's parent (the <th>).
Regards,