如何正确地适应表格单元格中的选择标记

Question

我拼命想让一个精选标签适合表格单元格,就像它属于那里一样,不像有人用撬棍楔入它.下面是代码,后面是它出现的图片:

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

FireFox的出现方式如下:

所以,这真的很难看,因为Select对象在单元格中有自己的边框,它有自己的边框.这就像用猪肉填馅鹅......看起来很惨!

可以抑制表格单元格边框以允许"选择标记"边框取代它们吗？

您可能还会注意到,该单元格的高度高于其他" 仅文本 "单元格.

Answer 1

使用选区的边框进行游戏(这可能在Safari中有效,也可能无效)

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

这是一个JsFiddle:http://jsfiddle.net/EuNw4/

而不是很多option onclick="JavaScript:quarterUpdate()"使用select onchange"JavaScript:quarterUpdate()"... 不应该使用这样的内联Javascript,你应该这样做:

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

Answer 2

从你的问题中，我了解到这就是你想要的：

http://jsfiddle.net/8vwV3/

table {
    border-collapse: collapse;
}

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

td select {
    border: none;
}