сортировка по id

Я сделаль живой поиск на сайте но не понимаю как стилизовать чтобы результат поиска показался по столбцу
есть фото
примерно вот так

1. результат поиска
   
2. результат поиска
   
3. результат поиска
   
   HTML KOД
   <!-- ЖИВОЙ ПОИСК --> <!-- QIDIRUV -->
   
   <div class="container">
   <div class="row">
   <div class="col-sm-3">
   </div>
   <div class="col-sm-6">
   <input type="text" class="form-control" id="search">
   </div>
   <div class="col-sm-3">
   </div>
   </div>
   
   <!-- СКРИПТ ЖИВОЙ ПОИСК --> <!-- QIDIRUV -->
   <script type="text/javascript">
   $(document).ready(function(){
   $("#search").keypress(function(){
   $.ajax({
   type:'POST',
   url:'search.php',
   data:{
   name:$("#search").val(),
   },
   success:function(data){
   $(".col11").html(data);
   }
   });
   });
   });
   </script>
   
   <!-- СКРИПТ ЖИВОЙ ПОИСК --> <!-- QIDIRUV -->
   <script type="text/javascript">
   $(document).ready(function(){
   $("#search").keypress(function(){
   $.ajax({
   type:'POST',
   url:'searc.php',
   data:{
   name:$("#search").val(),
   },
   success:function(data){
   $("#output").html(data);
   }
   });
   });
   });
   </script>
   
   <table class="layout" cellspacing="0">
   <tr>
   <td class="col11"> </td>
   <td class="col2">СОНИ</td>
   <td class="col3">НАРХИ</td>
   <td class="col4">ЯРОКЛИК МУДДАТИ</td>
   <td class="col5">СЕРИЯСИ</td>
   <td class="col6">ННН</td>
   </tr>
   </table>
   
   css код
   
   .layout {
   width: 100%;
   position: static;
   }
   .layout TD {
   vertical-align: top;
   padding: 5px;
   }
   .col11 {
   text-align: center;/* ТОВАР НОМИ */
   background: #fc0; /* Цвет фона первой колонки */
   width: 70px; /* Ширина первой колонки */
   min-width: 300px;
   }
   .col2 {
   background: #afccdb; /* Цвет фона второй колонки */
   text-align: center;
   width: 20px; /* Ширина первой колонки */
   min-width: 54px;
   }
   .col3 {
   background: #fc0; /* Цвет фона третьей колонки */
   text-align: center;
   width: 20px; /* Ширина первой колонки */
   min-width: 59px;
   }
   .col4 {
   text-align: center;
   background: #afccdb; /* Цвет фона второй колонки */
   width: 155px; /* Ширина первой колонки */
   min-width: 155px;
   }
   .col5 {
   text-align: center;
   margin-left: 750px;
   background: #fc0; /* Цвет фона третьей колонки */
   width: 155px; /* Ширина первой колонки */
   min-width: 155px;
   }
   .col6 {
   text-align: center;
   background: #afccdb; /* Цвет фона второй колонки */
   }
   
   

 

НЕ ОБРАЩАЙТЕ ВНИМАНИЕ НА #OUTPUT

Что делать с .col1 ?

 

я так понял в виде html
приходит фото из консоли

--- Добавлено ---

php отработчик

$sql = "SELECT*FROM user WHERENameLIKE '%".$_POST['name']."%'";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result)>0){
while ($row=mysqli_fetch_assoc($result)) {
echo " <tr>
<td>".$row['Name']."</td>
</tr>";
}
}
else{
echo "<tr> <td>0 result's found </td> </tr>";
}?>