как ограничить ширину выбора Bootstrap с очень длинным текстом в параметрах с помощью Jquery или CSS

Я использую jQuery DataTables, ниже таблицы заголовков я добавил выбор входных данных ( bootstrap-select).

Когда я выбираю вариант с длинным текстом, мое выравнивание таблицы искажается, как вы видите ниже: введите здесь описание изображения

когда я пробую таблицу { table-layout: fixed; }, она исправлена, но некоторые длинные данные в теле отображаются неправильно и перекрывают следующий столбец

и даже установка data-width на false в выборе не решила проблему. Также

select option {
    text-overflow:ellipsis;
    overflow:hidden; }

Любые предложения, пожалуйста, как я могу предотвратить сжатие поля выбора, когда я выбираю вариант с длинным текстом?

так что в основном <th>, где у меня есть выбор внутри, должен сохранять ту же ширину, что и заголовок, когда рисуются таблицы данных? Большое тебе спасибо.

$(document).ready(function() {

    var liveBacklogTable = $('#liveBacklogTable').DataTable( {

    "orderCellsTop": true,
    "scroller": true,
    "scrollY": 400,
    "scrollX": "100%",
    "scrollCollapse": true,
    "paging": false,
    "searching": false,
    "info": false,

    initComplete: function () { 

     $("select").selectpicker();

     } 
          
} );


} );
th, td {
    white-space: nowrap;
}

thead select {
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
    
<table id="liveBacklogTable" class="table table-bordered" style="width:100%">

<thead>
 <tr>
  <th>COUNTRY NAME</th>
  <th>COUNTRY CODE</th>
  <th>TERRITORY</th>
  <th>MARKET</th>
  <th>REGION</th>
  <th>Town</th>  
  <th>City</th>
  <th>Type</th>
  <th>STATUS</th>
  <th>Sold To</th>
  <th>Customer Name</th>        
 </tr>
     
 <tr>
  <th>
   <select class="form-control" title="All" data-container="body">
     <option value="">Loooooooooooooooooooooooooooooooooong text</option>
     <option value="">Short text</option>
   </select>
   </th>
   <th><select class="form-control" title="All" data-container="body"></select></th>
   <th><select class="form-control" title="All" data-container="body"></select></th>
   <th><select class="form-control" title="All" data-container="body"></select></th>
   <th><select class="form-control" title="All" data-container="body"></select></th>
   <th><select class="form-control" title="All" data-container="body"></select></th>  
   <th><select class="form-control" title="All" data-container="body"></select></th>
   <th><select class="form-control" title="All" data-container="body"></select></th>
   <th><select class="form-control" title="All" data-container="body"></select></th>
   <th><select class="form-control" title="All" data-container="body"></select></th>
   <th><select class="form-control" title="All" data-container="body"></select></th>        
  </tr>
 </thead>
        
 <tbody>
   <tr>
     <th>test</th>
     <th>test</th>
     <th>test</th>
     <th>test</th>
     <th>test</th>
     <th>test</th>  
     <th>test</th>
     <th>test</th>
     <th>test</th>
     <th>test</th>
     <th>test</th>            
   </tr>
 </tbody>    
</table>


jquery css bootstrap-select bootstrap-selectpicker datatables
person DevTN    schedule 05.07.2020    source источник
comment
Вы использовали max-width раньше?   -  person jbutler483    schedule 05.07.2020
comment
@ jbutler483 да, но проблема в том, что у меня есть имя динамического столбца в заголовке. это основано на выборе пользователя. я не могу установить фиксированную максимальную ширину для каждого столбца   -  person DevTN    schedule 05.07.2020
comment
в качестве альтернативы удалите теги <thead> и <tbody>   -  person jbutler483    schedule 05.07.2020
comment
Вы можете размещать эти типы поисковых виджетов за пределами таблицы — соответствующий/адаптируемый пример находится здесь.   -  person andrewjames    schedule 05.07.2020
comment
В качестве альтернативы выполните любой из показанных подходов здесь помочь? (Может быть похоже на то, что вы уже используете).   -  person andrewjames    schedule 05.07.2020
comment
@ jbutler483 есть причина использовать некоторые обратные вызовы datatables в теле и заголовке   -  person DevTN    schedule 05.07.2020