Отзывчивость таблицы начальной загрузки

Question

Я на начальной стадии в ReactJS. В настоящее время я использую Bootstrap 3. Я создал таблицу с 6 столбцами, как показано ниже:

<div className="col-md-12">
  <div className="table-responsive">
    <StudentBody
      data={studentList}
      searchText={this.state.text}
    />
  </div>
</div>

Используя CSS при наведении курсора на TR , я отобразил ссылку DELETE в последнем столбце. Все работает ожидаемым образом. Но проблема возникла, когда я завис над любыми TR и дисплеями DELETE , все столбцы сместились вправо, а если не зависали, то сместились в исходное положение. Как мне остановить это смещение поведения столбцов? Я не знаю, где это пошло не так

Answer 1

Я не уверен, какую логику вы используете, чтобы скрыть кнопку удаления. Вы можете сделать это, применив класс CSS с видимостью: скрытый. Не используйте дисплей: нет

видимость: скрыто скрывает элемент, но все равно занимает место в макете.

display: none удаляет элемент из документа. Он не занимает места.

Answer 2

Вы должны добавить position:absolute на ссылку удаления и

сделать TR position:relative

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

Подробнее о позиции CSS здесь