Как пофиксить баг с открытием таблицы?

Question

[Павел Воронюк]

Добрый вечер.

Есть таблица, в которой отображаются заказы и есть поле статуса.


По клику на строку (в любом месте) таблица раскрывается.


Но есть проблема:
Нужна опция изменения статуса заказа.
Но при клике на select открывается/закрывается вся таблица.

Вопрос: Как пофиксить, чтобы при клике на select открывался только он, и можно было выбрать другой статус?

<div class="table-body">
							<div v-if="worker != undefined" v-for="worker in mainData.workers" class="card">
								<div class="card-header" data-toggle="collapse" :data-target="'#'+'collapseWorker'+worker.id" aria-expanded="true" :aria-controls="'collapseWorker'+worker.id" :id="'headingWorker'+worker.id">
									<div class="table-cell stracuna" v-tooltip.right="msgDescription"> #0{{worker.id}}-000{{worker.id}}-2018</div>
									<div class="table-cell podjetje"> HiGroup d.o.o</div>
									<div class="table-cell znesek"> 2.999,00€</div>
									<!--<div class="table-cell rokplacila"> 29.09.18</div>-->
									<div class="table-cell izvoz">
										<i class="fas fa-file-excel" v-tooltip.right="msgExportDataExcel"></i>
										<i class="fas fa-file-pdf" v-tooltip.right="msgExportDataPdf"></i>
									</div>
									<div class="table-cell bills-status">
										<select name="" id="bills-status" >
											<option value="" selected> Izberi status </option>
											<option value="poslano"> Poslano </option>
											<option value="placano"> Plačano </option>
											<option value="opomin"> Opomin </option>
										</select>
									</div>
								</div>
								<div :id="'collapseWorker'+worker.id" class="collapse" :aria-labelledby="'headingWorker'+worker.id" data-parent="#accordionBills">
									<div class="card-body">
										<div class="content-bills">
											<div class="bills-info">
												<div class="bills-statistics">
												
														<div class="col"> Vseh voženj: 55</div>
														<div class="col"> Zdnja vožnja: 23€</div>
														<div class="col"> Odpelanih oseb: 76</div>
													
												</div>
													<div class="table-bills-drives table-all">
														<div class="table-body">
															<div class="card">
																<div class="card-header">
																	<div class="table-cell drives-status"><i class="fal fa-check" v-tooltip.right="msgStatus"></i></div>
																	<div class="table-cell drives-datum"><i class="fal fa-calendar-alt" v-tooltip.right="msgDrivesDate"></i></div>
																	<div class="table-cell drives-vstop" v-tooltip.bottom-end="msgStartLocation">Dunajska cesta 196, Ljubljana</div>
																	<div class="table-cell drives-izstop" v-tooltip.bottom-end="msgEndLocation"><i class="fas fa-plane-departure"></i> | Airport Ljubljana-(LJU), Spodnji Brnik 30</div>
																	<div class="table-cell drives-stranka">  Mateja Pušnik</div>
																	<div class="table-cell drives-voznik"> <span class="badge badge-dark" v-tooltip.bottom-end="msgInterna">70</span>Pawlek</div>
																	<div class="table-cell drives-edit"> <a href="#" v-tooltip.right="msgDrivesEdit"><i class=" btn btn-outline-dark fas fa-pencil-alt"></i></a></div>
																</div>
															</div>
															<!-- .card -->
														</div>
														<!-- .table-body -->
													</div>
													<!-- .table-drives-->
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

Пробовал через css задать z-index select выше .card-header, но не получилось(((

Answer 1

[Юпитер Макс]

Вот так