I am desperately trying to make a select tag fit in a table cell like it belongs there, not like someone wedged it in with a crowbar. Here is the code followed by the picture of how it appears:
<tr>
<td class="lblCell_L" >ISIN Code </td>
<td id="ISINcb" class="lblCell_R" align="center">
<select id='isinz' width="144" style="height:19px; width:140px; text-align:center;">
<option id="ISIN1" onclick="JavaScript:quarterUpdate()" >A</option>
<option id="ISIN2" onclick="JavaScript:quarterUpdate()" >B</option>
<option id="ISIN3" onclick="JavaScript:quarterUpdate()" >C</option>
<option id="ISIN4" onclick="JavaScript:quarterUpdate()" >E</option>
</select>
</td>
<td class="lblCell_tx" id="isinOptions" style="color:#a56;">0</td>
</tr>
The way this comes out in FireFox:
So, this is really ugly because the Select object has its own borders visible inside the cell, which has its own borders. It is like stuffing a goose with pork... dismal looking!
Can the table cell borders be suppressed to allow the Select Tag borders to take their place?
You may notice, also, that the height of that cell is higher than the other "text-only" cell.
In "Table Tools" click the [Layout] tab > locate the "Cell Size" group and choose from of the following options: To fit the columns to the text (or page margins if cells are empty), click [AutoFit] > select "AutoFit Contents." To fit the table to the text, click [AutoFit] > select "AutoFit Window."
The <select> element is most often used in a form, to collect user input. The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted). The id attribute is needed to associate the drop-down list with a label.
Definition and Usage The size attribute specifies the number of visible options in a drop-down list. If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.
The second is to click in each table, go to the Table Tools > Layout tab, click the AutoFit button, and choose Fixed Column Width. With those settings, you can drag a picture from Windows Explorer, or use the Insert > Picture dialog, to insert one picture into one cell.
Play with the border of the select (this may or may not work in Safari)
select {
border: 0;
width: 100%;
}
This is a JsFiddle: http://jsfiddle.net/EuNw4/
Also instead of a lot of option onclick="JavaScript:quarterUpdate()"
use select onchange"JavaScript:quarterUpdate()"
... Inline Javascript like this shouldn't be used, you should do:
// jQuery
jQuery(document).ready(function($) {
$('#isinz').on('change', quarterUpdate());
});
From your question, I understand that this is what you want:
http://jsfiddle.net/8vwV3/
table {
border-collapse: collapse;
}
td {
border: 1px solid #999;
padding:3px 10px;
}
td select {
border: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With