Отвечая как на исходный вопрос, так и на вопрос в комментарии.
Когда вы нажимаете на кнопку, событие всплывает и запускается для элемента строки, поэтому обработчик щелчкастроки (которая переключает раздел) также работает.Чтобы предотвратить это, вы можете остановить всплывающее событие click, вызвав event.stopPropagation() в обработчике нажатия кнопки сброса.
decollapse медленный, поскольку Bootstrap по умолчанию применяет класс.collapsing во время переключения.Это позволяет применить некоторую анимацию.Кажется, по умолчанию он просто анимирует высоту элемента.Однако в вашем случае анимация не работает, потому что высота строки таблицы не может быть меньше высоты содержимого, но задержка для предполагаемой анимации все еще существует.Вы можете disable анимацию, переопределив transition по умолчанию none, как я сделал ниже, или просто использовать что-то другое, кроме таблиц, например div.
ТакВот обновленная версия вашего кода в соответствии с моими комментариями:
.collapsing {
-webkit-transition: none !important;
transition: none !important;
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
<table class="table m-0">
<thead class="thead-light">
<tr>
<th>
<span class="d-inline-block align-middle">table head</span>
<button type="button" class="btn btn-secondary btn-sm float-right">button text</button>
</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
<td>
table content
<div class="btn-group float-right align-top" onclick=";">
<button type="button" class="btn btn-warning" onclick="alert('reset!');event.stopPropagation();">reset</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu bg-danger">
<a class="dropdown-item bg-danger text-white" onclick="alert('delete!');">delete</a>
</div>
</div>
</td>
</tr>
<tr class="collapse" id="collapse2">
<td>
<div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 1">
<div class="progress-bar" role="progressbar" style="width: 0%; background-color: #1AFF00" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 1</div>
</div>
<div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 2">
<div class="progress-bar" role="progressbar" style="width: 0%; background-color: #2B00FF" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 2</div>
</div>
</td>
</tr>
</tbody>
</table>
<script>
$(window).on('load', function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</div>
</body>
</html>