Как правильно подобрать тег select в ячейке таблицы

Я отчаянно пытаюсь сделать выбранный тег подходящим в ячейке таблицы, как он там, а не как кто-то вклинился в него с помощью лома. Вот код, за которым следует изображение того, как оно выглядит:

<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 имеет свои собственные границы, видимые внутри ячейки, у которой есть свои собственные границы. Это похоже на начинку гуся с свининой... мрачный взгляд!

Могут ли границы ячеек таблицы быть подавлены, чтобы позволить им выбирать границы выбора тега?

Вы также можете заметить, что высота этой ячейки выше, чем другая "только для текста".

Ответ 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());
});

Ответ 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.

Остальные мои границы - это леденцы для демонстрации.

Fiddle: http://jsfiddle.net/audetwebdesign/Em79R/