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

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

    

        
ISIN Code
        

            
                A Abel
                B Babel
                C Cable
                E Enable
            
        
        
0
    

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/