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

Answer 1

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 2

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