如何在表格單元格中正確放置選擇標記

我拼命地嘗試使表格單元格中的選擇標記適合它，而不是像某人將其嵌入撬槓中一樣。下面是代碼，然後它是如何出現的畫面：如何在表格單元格中正確放置選擇標記

<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 Tag has its own border inside the cell borders

所以，這是十分可怕的，因爲選擇對象都有自己在單元格內有可見的邊框，它有自己的邊框。這就像用豬肉餡鵝肉一樣......令人沮喪的看起來！

是否可以禁用表格單元格邊框以允許選擇標籤邊框取代它們的位置？

您可能還注意到，該單元格的高度高於其他「純文本」單元格的高度。

來源

2013-04-12 DKean

border-style：none;對於td – zod

select {border：none;} –

清除選定邊框並向td添加高度不是更好嗎？ – Spokey

播放與選擇的邊界（這可能會或可能不會在Safari工作）

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

這是一個JsFiddle：http://jsfiddle.net/EuNw4/

Al所以不是很多option onclick="JavaScript:quarterUpdate()"使用select onchange"JavaScript:quarterUpdate()" ... 聯JavaScript這樣不應該使用，你應該做的：

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

來源

2013-04-12 18:56:44

@亞歷山德拉優秀的簡單性，雖然很明顯，我甚至不在附近！你是王子！ – DKean

@Alex，快速提問...onchange通常意味着從我的背景中輸入一些東西（VFP）。這是如何轉化爲點擊以觸發事件？ – DKean

對不起，我毀了你的名字，阿克塞爾... – DKean

從你的問題，我明白這是你想要什麼：

http://jsfiddle.net/8vwV3/

table { 
    border-collapse: collapse; 
} 

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

td select { 
    border: none; 
}

來源

2013-04-12 18:53:51 Arbel

優秀的解決方案。謝謝。 – DKean

您可以隱藏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; 
}

你可能不超過下來ARRO得到太多的控制w在選擇菜單中。

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

我的其他邊界是演示的視覺效果。

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

來源

2013-04-12 19:03:32

關於INHERIT的好處！謝謝。 – DKean

歡迎您，很高興幫助！ –

如何在表格單元格中正確放置選擇標記

回答

相關問題