How to fit a select tag in a table cell properly

Question

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 o

Answer 1

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

Answer 2

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());
});

Answer 3

You can hide borders on the select element, for example:

<table>
    <tr>
        <td class="lblCell_L">ISIN Code</td>
        <td id="ISINcb" class="lblCell_R" align="center">
            <select>
                <option id="ISIN1">A Abel</option>
                <option id="ISIN2">B Babel</option>
                <option id="ISIN3">C Cable</option>
                <option id="ISIN4">E Enable</option>
            </select>
        </td>
        <td class="lblCell_tx" id="isinOptions">0</td>
    </tr>
</table>

and the CSS might be:

table {
    outline: 1px solid black;
    font-family: Arial, sans-serif;
    font-size: 20px;
}
table td {
    border: 1px solid blue;
    padding: 5px;
}
select { 
    width: 140px;
    border: none;
    font-family: inherit;
    font-size: inherit;
}

You may not get much control over the down arrow in the select menu.

Make sure that you use inherit to keep the font-family and size consistent in the select menu.

The rest of my borders are eye-candy for the demo.

Fiddle: http://jsfiddle.net/audetwebdesign/Em79R/