Блог

Главная - Вопросы по программированию - Наложенная полоса прокрутки не работает в mozilla и IE

Наложенная полоса прокрутки не работает в mozilla и IE

#html #css

#HTML #css

Вопрос:

В нашем приложении у нас есть таблица с динамическим количеством строк и столбцов.. одна и та же директива используется для отображения двух разных таблиц. Я добавил наложенную полосу прокрутки в таблицу … она отлично работает в chrome, но в Mozilla и IE — нет.. В обоих браузерах она действует как обычная полоса прокрутки и вызывает смещение.. Может ли кто-нибудь помочь мне с этим .. любое другое решение, чтобы избежать смещения таблицы. https://jsfiddle.net/KrishnaAnanthi/t1vna5uz /

 table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}

.filter-container {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0px !important;
  margin: 0px !important;
}

.header-container {
  height: 100%;
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
}

.header-text {
  font-size: 22px;
  line-height: 24px;
}

.header-text {
  color: #000000;
  font-weight: normal;
  word-break: break-all;
}

tbody.scrollContent {
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: overlay;
  background-color: white;
}

tbody {
  display: block;
}

.header-text {
  width: 90%;
  float: left;
  text-align: start;
  letter-spacing: 0;
  text-align: left;
}

.icon-right {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
}

.sort-icon {
  float: right !important;
  clear: right;
  height: 1px !important;
}

thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}  
 <table style="width:80%">
  <thead>
    <tr>
      <th>
        <div class='filter-container header-container'>
          <div class='header-text'> Name of station </div>
          <div class='icon-right'> <span class="fa fa-sort-asc fa-lg sort-icon "></span><span class="fa fa-sort-desc fa-lg sort-icon  "></span></div>
        </div>
      </th>
      <th>
        <div class='filter-container header-container'>
          <div class='header-text'> lastname</div>
          <div class='icon-right'> <span class="fa fa-sort-asc fa-lg sort-icon "></span><span class="fa fa-sort-desc fa-lg sort-icon  "></span></div>
        </div>
      </th>
      <th>
        <div class='filter-container header-container'>
          <div class='header-text'> Age</div>
          <div class='icon-right'> <span class="fa fa-sort-asc fa-lg sort-icon "></span><span class="fa fa-sort-desc fa-lg sort-icon  "></span></div>
        </div>
      </th>
      <th>
        <div class='filter-container header-container'>
          <div class='header-text'> Address</div>
          <div class='icon-right'> <span class="fa fa-sort-asc fa-lg sort-icon "></span><span class="fa fa-sort-desc fa-lg sort-icon  "></span></div>
        </div>
      </th>
      <th>
        <div class='filter-container header-container'>
          <div class='header-text'> Hobby</div>
          <div class='icon-right'> <span class="fa fa-sort-asc fa-lg sort-icon "></span><span class="fa fa-sort-desc fa-lg sort-icon  "></span></div>
        </div>
      </th>
    </tr>
  </thead>
  <tbody class='scrollContent'>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
      <td>Bangalore</td>
      <td>Playing</td>
    </tr>
  </tbody>
</table>

смещение из-за полосы прокрутки

Ответ №1:

На самом деле, когда мы динамически устанавливаем ширину таблицы и устанавливаем overflow для прокрутки, мы можем получить ожидаемый результат. И ширина должна быть установлена для всех столбцов, кроме последнего столбца. допустим, у нас есть таблица с 5 столбцами, нам нужно установить ширину для первых четырех столбцов, а пятый столбец будет автоматически настроен 

 #table_id thead tr th:nth-child(2),
#table_id thead tr th:nth-child(3),
#table_id thead tr th:nth-child(4),
#table_id tbody tr td:nth-child(2),
#table_id tbody tr td:nth-child(3),
#table_id tbody tr td:nth-child(4) {
    width: calc((100vw - 150px) / 4);
}