jQuery 如何在表格单元格中正确放置选择标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15978632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fit a select tag in a table cell properly
提问by DKean
I am desperately trying to make a select tag fit in a table cell like it belongs there, not like someone wedged it in with a crowbar. Here is the code followed by the picture of how it appears:
我拼命地试图让一个选择标签适合一个表格单元格，就像它属于那里一样，而不是像有人用撬棍把它塞进去。这是代码后跟它的显示方式的图片：
<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>
The way this comes out in FireFox:
这在 FireFox 中出现的方式：
So, this is really ugly because the Select object has its own borders visible inside the cell, which has its own borders. It is like stuffing a goose with pork... dismal looking!
所以，这真的很难看，因为 Select 对象在单元格内有自己可见的边框，单元格有自己的边框。这就像用猪肉塞鹅......看起来很惨！
Can the table cell borders be suppressed to allow the Select Tag borders to take their place?
可以抑制表格单元格边框以允许选择标签边框代替它们吗？
You may notice, also, that the height of that cell is higher than the other "text-only" cell.
您可能还会注意到，该单元格的高度高于另一个“纯文本”单元格。
采纳答案by Axel A. García
Play with the border of the select (this may or may not work in Safari)
播放选择的边框（这在 Safari 中可能有效，也可能无效）
select {
border: 0;
width: 100%;
}
This is a JsFiddle: http://jsfiddle.net/EuNw4/
这是一个 JsFiddle：http: //jsfiddle.net/EuNw4/
Also instead of a lot of option onclick="JavaScript:quarterUpdate()"use select onchange"JavaScript:quarterUpdate()"... Inline Javascript like this shouldn't be used, you should do:
也不要大量option onclick="JavaScript:quarterUpdate()"使用select onchange"JavaScript:quarterUpdate()"......不应该使用这样的内联Javascript，你应该这样做：
// jQuery
jQuery(document).ready(function($) {
$('#isinz').on('change', quarterUpdate());
});
回答by Arbel
From your question, I understand that this is what you want:
从你的问题，我明白这就是你想要的：
table {
border-collapse: collapse;
}
td {
border: 1px solid #999;
padding:3px 10px;
}
td select {
border: none;
}
回答by Marc Audet
You can hide borders on the selectelement, for example:
您可以隐藏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>
and the CSS might be:
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;
}
You may not get much control over the down arrow in the select menu.
您可能无法控制选择菜单中的向下箭头。
Make sure that you use inheritto keep the font-family and size consistent in the selectmenu.
确保您inherit用来保持select菜单中的字体系列和大小一致。
The rest of my borders are eye-candy for the demo.
我的其余边界对于演示来说很吸引人。
