как добавить горизонтальную полосу прокрутки в столбце, если текст переполняется, иначе он будет скрыт - PullRequest
Новая
       18

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

0 голосов
/ 27 июня 2018

Я хочу добавить горизонтальную полосу прокрутки к столбцу, если текст столбца переполняется. Я не хочу увеличивать ширину столбца. Я использовал текст Nowrap, но также хочу добавить к нему горизонтальную полосу прокрутки. И если текст не переполняется, то полоса прокрутки будет скрыта. Это мой код Прямо сейчас эта полоса прокрутки работает для всего столбца, а не для какого-либо конкретного столбца. Я должен использовать JS для этого условия, но я не уверен, как правильно его использовать.

HTML: 

<table class="table">
   <thead>
     <tr>
      <th>Serial</th>
      <th>Name of the Project</th>
       <th>Name of the Clients</th>
      </tr>
  </thead>
  <tbody>  
   <tr class="active">                                                                             
    <td>1</td>

    <td>Column content</td>

    <td class="tHor">

      Name 1 Name 2

      Name 1 Name 2

      Name 1 Name 2

      Name 1 Name 2

    </td>

  </tr>
  <tr>

   <td>3</td>

   <td>Column content</td>

   <td class="tHor"> Name 1 Name 2</td>
  </tr>

 </tbody>
</table>

CSS: 

.tHor{
   overflow-x: auto;
   white-space: nowrap;
}

Я хочу, чтобы этот класс 'tHor' имел полосу прокрутки, если текст увеличивается в этом коде, столбец 1-й строки будет показывать полосу, а для столбца 2-й строки горизонтальная полоса прокрутки должна быть скрыта.

1 Ответ

0 голосов
/ 27 июня 2018

Вам не нужен JavaScript для достижения этой цели. Просто установите max-width свойство: 

.tHor{
  overflow-x: auto;
  white-space: nowrap;
  max-width: 200px;
}
<table class="table">
  <thead>
    <tr>
      <th>Serial</th>
      <th>Name of the Project</th>
      <th>Name of the Clients</th>
    </tr>
  </thead>
  <tbody>  
    <tr class="active">                                                             
      <td>1</td>
      <td>Column content</td>
      <td class="tHor">
        Name 1 Name 2
        Name 1 Name 2
        Name 1 Name 2
        Name 1 Name 2
      </td>

    </tr>
    <tr>
      <td>3</td>
      <td>Column content</td>
      <td class="tHor"> Name 1 Name 2</td>
    </tr>

  </tbody>
</table>
...