У меня есть странная проблема: если я добавлю th-ю строку в верхнюю таблицу, то нижняя таблица потеряет все свои CSS и структуру. Если я удаляю TR TH из верхней таблицы, то она работает нормально. Что мне здесь не хватает. Я играю с этим уже 3 часа.
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
</head>
<?php
session_start();
require('../../assets/nav.php'); ?>
<body>
<div class="search">
<form action="index.php" method="post">
<div class="form-row align-items-center">
<div class="col-auto my-1">
<input type="text" name="imei">
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<div id="vzwdiv">
<br />
<table
id="table1"
data-show-toggle="true"
data-show-export="true"
data-height="300"
data-click-to-select="true"
data-detail-formatter="detailFormatter"
data-toggle="table"
data-mobile-responsive="true"
>
<thead class="thead-light">
<tr>
<th colspan="2">Item Detail</th>
</tr>
<tr>
<th> City </th>
<th> Agent_ID </th>
<th> Tran_Year </th>
<th> Tran_Period </th>
<th> Original_Mobile_ID </th>
<th> Mobile_ID </th>
<th> Device_ID </th>
<th> Account_Number </th>
<th> Customer_Name </th>
<th> Device_Change_Date </th>
<th> New_Device_Contract_Begin_Date </th>
<th> New_Device_Contract_End_Date </th>
<th> Access_Charge </th>
<th> Contract_Term </th>
<th> Model </th>
<th> Alt_Mobile_ID </th>
<th> Previously_Activated_Equip </th>
<th> Installment_Contract </th>
<th> Purchased_Receivable </th>
<th> Agent_SS </th>
<th> Previous_Price_Plan </th>
<th> Previous_Access_Charge </th>
<th> Kicker_Eligible </th>
<th> DPA_Service_Fee2 </th>
<th> Commission_Amount2 </th>
<th> Additional_Commission_Amount2 </th>
<th> SPIFF_Amount2 </th>
<th> District </th>
</tr>
</thead>
<?php include 'upgradesSearch.php'; ?>
</tr>
</table>
<table
id="table"
data-show-toggle="true"
data-show-export="true"
data-click-to-select="true"
data-height="300"
data-detail-formatter="detailFormatter"
data-toggle="table"
data-mobile-responsive="true"
>
<thead class="thead-light">
<tr>
<tr>
<th colspan="2">Activations Table</th>
</tr>
<th data-width="5"> District </th>
<th data-width="5"> City </th>
<th data-width="5"> Tran Year </th>
<th data-width="5"> Tran Period </th>
<th data-width="5"> Mobile ID </th>
<th data-width="5"> Device ID </th>
<th data-width="5"> Account Number </th>
<th data-width="5"> Customer Name </th>
<th data-width="5"> Activation Date </th>
<th data-width="5"> Contract Term </th>
<th data-width="5"> Model </th>
<th data-width="5"> Agent SS </th>
<th data-width="5"> Account Create Date </th>
<th data-width="5"> Original Account Number </th>
</tr>
</thead>
<?php include 'activationsSearch.php'; ?>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
</body>
Если я их шлепаю, происходит то же самое. Это всегда вторая таблица, которая имеет проблемы. Я следовал за этим https://live.bootstrap-table.com/example/welcomes/group-columns.html, чтобы разобраться в структуре. Еще ничего. Я даже протестировал 2 таблицы, используя сайт выше, и он работал нормально.