Приветствую!
Помогите разобраться. Когда ищешь в левой колонке через "Поиск1", то правая колонка смещается в левую. Возможно ли сделать чтобы правая колонка не смещалась и запрос в левой колонке был вверху?
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">'
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">
<style>
.tablinks, .tablinks2 {font-size:12px;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif}
.tablinks:hover, .tablinks2:hover{cursor:pointer;color:white;background-color:black;}
tr .tablinks {background-color: #C8C8C8}
.leftable{width:20%}
</style>
</head>
<body>
<table id="mytable" class="leftable">
<thead>
<tr>
<th>
<div class="ui fluid icon input">
<input type="text" id="search" placeholder="Поиск1">
<i class="search icon"></i>
</div>
</th>
<th>
<div class="ui fluid icon input">
<input type="text" id="search-right" placeholder="Поиск2">
<i class="search icon"></i>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tablinks">Яблоко</td>
<td class="tablinks2">Яблоко</td>
</tr>
<tr>
<td class="tablinks">Банан</td>
<td class="tablinks2">Банан</td>
</tr>
<tr>
<td class="tablinks">Апельсин</td>
<td class="tablinks2">Апельсин</td>
</tr>
<tr>
<td class="tablinks">Киви</td>
<td class="tablinks2">Киви</td>
</tr>
<tr>
<td class="tablinks">Мандарин</td>
<td class="tablinks2">Мандарин</td>
</tr>
<tr>
<td class="tablinks">Арбуз</td>
<td class="tablinks2">Арбуз</td>
</tr>
<tr>
<td class="tablinks">Груша</td>
<td class="tablinks2">Груша</td>
</tr>
</tbody>
<script>
$(document).ready(function(){
$("#search").keyup(function(){
_this = this;
$.each($("tr .tablinks"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1){
$(this).hide();
} else {
$(this).show();
}
});
});
});
</script>
</table>
</body>
</html>