web-dev-qa-db-ja.com

選択タグをテーブルセルに適切に合わせる方法

私は、誰かがクローバーでそれを押し込んだようにではなく、選択タグがそこに属しているようにテーブルセルに収まるように必死に努力しています。コードの後に​​、どのように表示されるかを示します。

<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

したがって、Selectオブジェクトにはセル内に表示される独自の境界線があり、セル内には独自の境界線があるため、これは非常に醜いです。それはガチョウに豚肉を詰めるようなものです...陰気な見た目です！

テーブルセルの境界線を抑制して、タグの選択境界線を使用できるようにすることはできますか？

また、そのセルの高さが他の "text-only"セルよりも高いことに気付くかもしれません。

javascriptjqueryhtmlcssdom
13
DKean

選択範囲の境界線で遊んでください（これは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());
});
_
8
Axel A. García

あなたの質問から、私はこれがあなたが望むものであることを理解しています：

http://jsfiddle.net/8vwV3/

table {
    border-collapse: collapse;
}

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

td select {
    border: none;
}
4
Arbel

次に、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/

3
Marc Audet