So passen Sie ein Select-Tag in eine Tabellenzelle an

Question

Ich versuche verzweifelt, ein Select-Tag in eine Tabellenzelle einzufügen, so wie es dort hingehört, nicht wie jemand es mit einer Brechstange eingekeilt hat. Hier ist der Code, gefolgt von dem Bild, wie es scheint:

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

Die Art und Weise dies in FireFox kommt:

Also, das ist wirklich hässlich, weil das Objekt auswählen hat seine eigenen Grenzen innerhalb der Zelle, die ihre eigenen Grenzen hat. Es ist wie eine Gans mit Schweinefleisch zu stopfen ... trist aussehende!

Können die Grenzen der Tabellenzellen unterdrückt werden, damit die Markierungsrahmen-Auswahl an ihre Stelle gesetzt werden kann?

Sie können auch feststellen, dass die Höhe dieser Zelle höher ist als die andere "Nur-Text-Zelle" Zelle.

Answer 1

Spiel mit der Grenze der select (dies kann oder kann nicht in Safari arbeiten)

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

Dies ist ein JsFiddle: http://jsfiddle.net/EuNw4/

Al so statt einer Menge option onclick="JavaScript:quarterUpdate()" Verwendung select onchange"JavaScript:quarterUpdate()" ... Inline Javascript wie diese sollten nicht verwendet werden, sollten Sie tun:

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

Answer 2

Aus Ihrer Frage, ich verstehe, dass das ist, was Sie wollen:

http://jsfiddle.net/8vwV3/

table { 
    border-collapse: collapse; 
} 

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

td select { 
    border: none; 
} 

Answer 3

Sie grenzt an das select Element verbergen, zum Beispiel:

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

und die CSS könnte sein:

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

Sie nicht viel Kontrolle über die nach unten arro bekommen kann w im Auswahlmenü.

Stellen Sie sicher, dass Sie inherit verwenden, um die Schriftfamilie und -größe im Menü select konsistent zu halten.

Der Rest meiner Grenzen sind Augenschmaus für die Demo.

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