Обрезать ширину одной ячейки у таблицы BOOTSTRAP

Question

Есть Таблица, которая имеет горизонтальную и вертикальную прокрутку, фиксированный хедер. Все устраивает, кроме одного:
Колонка "Наименование работы" (2 колонка) может иметь объемный текст, что растягивает ячейку. Как сделать так, чтобы эта ячейка имела фиксированную ширину, а содержимое обрезалось, не выступая на другие ячейки?

Например, ячейка содержит текст:
"Строка очень длинная, которая не влезает"

Сделать:
"Строка очень длинная..."
Далее у меня будет ссылка на модальное окно, которое отображает полный текст ячейки.

.table-responsive{
  height:400px;  
  overflow:scroll;
}
 thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .table-responsive{
  height:400px;  
  overflow:scroll;
}
 thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
.vertbottom {
display: table-cell;
vertical-align:bottom;

}

<!-- НАЧАЛО Таблица-->
<div class="table-responsive">
    <table class="table table-hover" id="job-table">
      <thead>
        <tr>
                            <th scope="col">№</th>
                            <th scope="col">Наим-ие работы</th>     <!--  Скопировать для вывода добавить столбец с заголовком -->
                            <th scope="col">Кол-во</th>
                            <th scope="col">Кол-во годных</th>
                            <th scope="col">№ чертежа</th>
                            <th scope="col">Заказ</th>
                            <th scope="col">Шифр проф.</th>
                            <th scope="col">nomer_op</th>
                            <th scope="col">pz_chasi</th>
                            <th scope="col">pz_minuti</th>
                            <th scope="col">normo_chasi</th> 
                            <th scope="col">normo_minuti</th> 
                            <th scope="col">tarif</th>
                            <th scope="col">raz_rab</th>
                            <th scope="col">cex_zakazchik</th>
                            <th scope="col">chaci_raschet</th>
                            <th scope="col">summa_raschet</th>
                            <th scope="col">Выбрать</th>
                
          
        </tr>
      </thead>
      <tbody class="tableBody">

            <tr key={key}>
              <td >1</td>
              <td>Полное наименование...
              <div class="vertbottom">
              <a href="#" data-toggle="modal" data-toggle="modal" data-target="#exampleModal">Показать полностью</a></div>
              </td>
              <td>3</td>
              <td >17</td>
              <td>43434234234234234</td>
              <td>0211621</td>
              <td>19149</td>
              <td>010</td>
              <td>0</td>
              <td>15.00</td>
              <td>0</td>
              <td>40.00</td>
              <td>1.27</td>
              <td>3</td>
              <td>031</td>
              <td>1.6</td>
              <td>566.06</td>
              <td><input class="big-checkbox" name="deleteId[]" type="checkbox" value="<?=$value['id'];?>"></td>
                        <?php include_once ('modaltable.php');?>    
            </tr>
            <tr key={key}>
              <td >1</td>
              <td>Полное наименование, которое сокращено, но доступно по ссылке
              <div class="vertbottom "><a href="#" data-toggle="modal" data-target="#fullCenter">Показать полностью</div>
              </td>
              <td>3</td>
              <td >17</td>
              <td>43434234234234234</td>
              <td>0211621</td>
              <td>19149</td>
              <td>010</td>
              <td>0</td>
              <td>15.00</td>
              <td>0</td>
              <td>40.00</td>
              <td>1.27</td>
              <td>3</td>
              <td>031</td>
              <td>1.6</td>
              <td>566.06</td>
              <td><input class="big-checkbox" name="deleteId[]" type="checkbox" value="<?=$value['id'];?>"></td>
              
            </tr>
            
                        <tr key={key}>
              <td >1</td>
              <td>Полное наименование, которое сокращено, но доступно по ссылке
              <div class="vertbottom "><a href="#" data-toggle="modal" data-target="#fullCenter">Показать полностью</div>
              </td>
              <td>3</td>
              <td >17</td>
              <td>43434234234234234</td>
              <td>0211621</td>
              <td>19149</td>
              <td>010</td>
              <td>0</td>
              <td>15.00</td>
              <td>0</td>
              <td>40.00</td>
              <td>1.27</td>
              <td>3</td>
              <td>031</td>
              <td>1.6</td>
              <td>566.06</td>
              <td><input class="big-checkbox" name="deleteId[]" type="checkbox" value="<?=$value['id'];?>"></td>
            </tr>
            
                        <tr key={key}>
              <td >1</td>
              <td>Полное наименование, которое сокращено, но доступно по ссылке
              <div class="vertbottom "><a href="#" data-toggle="modal" data-target="#fullCenter">Показать полностью</div>
              </td>
              <td>3</td>
              <td >17</td>
              <td>43434234234234234</td>
              <td>0211621</td>
              <td>19149</td>
              <td>010</td>
              <td>0</td>
              <td>15.00</td>
              <td>0</td>
              <td>40.00</td>
              <td>1.27</td>
              <td>3</td>
              <td>031</td>
              <td>1.6</td>
              <td>566.06</td>
              <td><input class="big-checkbox" name="deleteId[]" type="checkbox" value="<?=$value['id'];?>"></td>
            </tr>
            
            
             
        
      </tbody>
    </table>
  </div>
<!-- КОНЕЦ Таблица-->

БЛОГ НА HUSL

Обрезать ширину одной ячейки у таблицы BOOTSTRAP

Ответы (0 шт):