14

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

<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 对象在单元格内有自己的可见边界，单元格有自己的边界。这就像用猪肉填充鹅......看起来很糟糕！

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

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

4

3 回答 3

8

玩选择的边框（这在 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());
});
于 2013-04-12T18:56:44.233 回答
4

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

http://jsfiddle.net/8vwV3/

table {
    border-collapse: collapse;
}

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

td select {
    border: none;
}
于 2013-04-12T18:53:51.503 回答
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/

于 2013-04-12T19:03:32.113 回答