如何正确适应表格单元格中的选择标签 [英] How to fit a select tag in a table cell properly
问题描述
我拼命试图让一个选择标签适合表格单元格，就像它属于那里一样，而不是像有人用撬棍将其嵌入。这里是代码后面跟着它的图片：
< tr>
< td class =lblCell_L> ISIN代码< / td>
< td id =ISINcbclass =lblCell_Ralign =center>
< option id =ISIN1onclick =JavaScript：quarterUpdate（）> A< / option>
< option id =ISIN2onclick =JavaScript：quarterUpdate（）> B< / option>
< option id =ISIN3onclick =JavaScript：quarterUpdate（）> C< / option>
< option id =ISIN4onclick =JavaScript：quarterUpdate（）> E< / option>
< / select>
< / td>
< td class =lblCell_txid =isinOptionsstyle =color：＃a56;> 0< / td>
< / tr>
FireFox出现的方式：
因此，这是非常丑陋的，因为Select对象在单元格内有可见的边界，而边界是可见的。这就像是用猪肉馅一只鹅......令人沮丧的看！
表格单元格边界可以被抑制以允许选择标签边界取代它们的位置吗？
您也可能注意到，该单元格的高度比其他纯文本单元格高。
使用select的边框播放（这可能在Safari中可能无效）
select {
border：0;
宽度：100％;
}
这是一个JsFiddle： http://jsfiddle.net/EuNw4/
另外，不是很多选项onclick =JavaScript：quarterUpdate（）使用选择onchangeJavaScript：quarterUpdate（） ... 内嵌Javascript像这样不应该使用，你应该这样做：
// jQuery
jQuery ）.ready（function（$）{
$（'＃isinz'）。on（'change'，quarterUpdate（））;
}）;
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:
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!
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.
Play with the border of the select (this may or may not work in Safari)
select {
border: 0;
width: 100%;
}
This is a 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:
// jQuery
jQuery(document).ready(function($) {
$('#isinz').on('change', quarterUpdate());
});
这篇关于如何正确适应表格单元格中的选择标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
