Ответ 1
1) Прежде всего, ширина ваших двух полей выбора больше ширины столбца, который содержит его (вам нужно учитывать все заполнение и маржу).
После того, как вы установите ширину каждого из полей выбора примерно на 230px, они должны соответствовать.
2) Вы сказали: "Когда вы выбираете длинное значение, оно выходит за границы содержащего div".
Учитывая, что ваши параметры выбора содержат больше символов, чем та, которая может удерживать ширину вашего окна выбора, она должна расширяться до ширины, достаточно широкой, чтобы ее можно было увидеть, когда она падает. Это не ошибка, так оно и есть.
Если вы хотите, чтобы выпадающие страницы имели такую же ширину, что и поле выбора, имея особенно длинные параметры, отображаемые в многострочных линиях. Насколько мне известно, для этого не существует подходящего для CSS-совместимого решения.
Вы можете, однако, добиться этого, используя комбинацию javascript/jquery + CSS.
3) Проблема "вверх" / "вниз" связана с различными способами, в которых браузеры отображают элементы /CSS.
Эта "проблема" может быть улучшена с использованием решения javascript/jquery, как предложено в пункте 2.
4) Обратите внимание, что IE7 и ниже не поддерживают много решений javascript/jquery для этого типа проблем, но вполне нормально предоставлять полную поддержку IE6 и 7 в это время и в возрасте. < ш > При необходимости вы всегда можете иметь отдельную таблицу стилей CSS для старых браузеров.
5). Вы можете легко преобразовать ваш текущий макет в Div + CSS и тем самым отказаться от использования таблицы, которая действительно должна использоваться только для отображения данных.
Легче сделать вашу страницу чувствительной к разным размерам экрана, если вы делаете свой макет в Div + CSS, чем в форме таблицы.
6) Я собрал демо-версию jQuery-плагина на основе вашего исходного кода для вашей справки. Я сохранил таблицу в demo, но, как упоминалось в пункте 5, вы должны изучить возможность преобразования своего макета в Div, если это возможно.
Надеюсь, что это поможет.
$(function() {
$("#drpVendor").selectBoxIt({
theme: "default",
defaultText: "ALL",
autoWidth: false
});
$("#drpVendorFacility").selectBoxIt({
theme: "default",
defaultText: "ALL",
autoWidth: false
});
});@import url("http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css");
.selectboxit-container .selectboxit,
.selectboxit-container .selectboxit-options {
width: 225px;
/* Width of the dropdown button */
border-radius: 3px;
margin-top: 3px;
}
.selectboxit-container span,
.selectboxit-container .selectboxit-options a {
line-height: 20px;
height: 22px;
}
.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
white-space: normal;
min-height: 22px;
height: auto;
}
.first {
padding: 0 0 0 10px;
}
.top {
padding-top: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>
<div style="width:500px; background-color:gray">
<table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;">
<tbody>
<tr>
<td colspan="2" class="first top">
<b>Select Provider</b>
</td>
<td colspan="2" class="top">
<b>
Select Locations
</b>
</td>
</tr>
<tr>
<td colspan="2" class="first">
<select name="drpVendor" id="drpVendor" fieldname="Vendor">
<option selected="selected" value="">ALL</option>
<option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option>
<option value="11825">A SCD GARMENT CO LTD DIV Sample, Sample, Sample</option>
</select>
</td>
<td colspan="2">
<select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility">
<option value="1">ALL</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
</select>
</td>
</tr>
<tr>
<td colspan="4">
<hr>
</td>
</tr>
</tbody>
</table>
<input name="hidUserID" type="hidden" id="hidUserID" value="1">
</div>