如何在表格单元格中正确放置选择标签答案

【问题标题】：How to fit a select tag in a table cell properly如何在表格单元格中正确放置选择标签
【发布时间】：2013-04-05 09:50:31
【问题描述】：

我正在拼命地尝试使选择标签适合表格单元格，就像它属于那里一样，而不是像有人用撬棍将它楔入一样。下面是代码，后面是它的外观图片：

<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 对象在单元格内有自己的可见边界，单元格有自己的边界。就像给鹅塞猪肉一样……看起来很惨！

是否可以抑制表格单元格边框以允许选择标签边框取而代之？

您可能还注意到，该单元格的高度高于另一个“纯文本”单元格。

【问题讨论】：

边框样式：无；为 td
选择 {border: none;}
清除选择边框并为td添加高度不是更好吗？
select 元素越像 td 的一部分，就越不像表单控件，这可能会让用户感到困惑。
在option 标签中小心使用onclick - 它在Safari/Chrome 中不起作用。我不确定 IE。

标签： javascript jquery html css dom

【解决方案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());
});

【讨论】：

@Alex 非常简单，虽然很明显我什至不在附近！你是王子！
@Alex，快速提问... onchange 通常意味着从我的背景（VFP）输入一些东西。这如何转化为点击触发事件？
在select 中，当您选择某些内容时会被触发。点击并不总是一种选择。

【解决方案2】：

根据您的问题，我知道这就是您想要的：

http://jsfiddle.net/8vwV3/

table {
    border-collapse: collapse;
}

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

td select {
    border: none;
}

【讨论】：

优秀的解决方案。谢谢。

【解决方案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/

【讨论】：

您还可以设置outline: none; 以移除在聚焦时出现的蓝色（在 Chrome 中）边框。