Come montare correttamente un tag select in una cella di tabella

Question

Sto cercando disperatamente di inserire un tag select in una cella di tabella come se fosse lì, non come se qualcuno lo avesse incastrato con un piede di porco. Ecco il codice seguito dal quadro di come appare:

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

Il modo in cui questo viene fuori in FireFox:

Quindi, questo è davvero brutto perché l'oggetto Select dispone di un proprio bordi visibili all'interno della cella, che ha i suoi confini. È come se riempissi un'oca con maiale ... guardando lugubre!

È possibile sopprimere i bordi delle celle della tabella per consentire il corretto posizionamento dei bordi del tag di selezione?

Si può notare, inoltre, che l'altezza di tale cella è superiore rispetto all'altra cella "solo testo".

Answer 1

Giocare con il bordo della selezione (questo può o non può funzionare in Safari)

select { 
    border: 0; 
    width: 100%; 
} 

Questo è un JsFiddle: http://jsfiddle.net/EuNw4/

Al così invece di un sacco di option onclick="JavaScript:quarterUpdate()" uso select onchange"JavaScript:quarterUpdate()" ... Inline Javascript come questo non dovrebbe essere utilizzato, si dovrebbe fare:

// jQuery 
jQuery(document).ready(function($) { 
    $('#isinz').on('change', quarterUpdate()); 
}); 

Answer 2

Dalla tua domanda, ho capito che questo è ciò che si vuole:

http://jsfiddle.net/8vwV3/

table { 
    border-collapse: collapse; 
} 

td { 
    border: 1px solid #999; 
    padding:3px 10px; 
} 

td select { 
    border: none; 
} 

Answer 3

È possibile nascondere confina con l'elemento select, ad esempio:

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

e il CSS potrebbe essere:

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

Tu non puoi ottenere molto controllo sulla Arro giù w nel menu di selezione.

Assicurarsi di utilizzare inherit per mantenere la famiglia di font e le dimensioni coerenti nel menu select.

Il resto delle mie frontiere è un vero piacere per la demo.

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