如何正確地適應表格單元格中的選擇標記

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

Answer 3

您可以隱藏select元素上的邊框，例如：

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

CSS可能是：

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

您可能無法控制選擇菜單中的向下箭頭。

確保使用inherit來保持select菜單中的字體系列和大小一致。

我的其余邊界對於演示而言非常有吸引力。

小提琴： http ： //jsfiddle.net/audetwebdesign/Em79R/