Невозможно привести выпадающий контент в соответствие с моей строкой поиска, когда моя панель поиска находится по центру. Что я могу сделать?

Question

Панель поиска предназначена для того, чтобы сидеть в центре этой таблицы. очевидно, я не включил много кода, поэтому, если кто-то захочет увидеть весь мой код, пожалуйста, спросите, как я действительно борюсь с этим. Это работает, однако содержимое выпадающего меню, похоже, выравнивается по левому краю. Пожалуйста, помогите

Это html

<table class="navbar-table">
    <tr>
        <!-- <td style= "margin: 0px 0px; padding: 0px 0px"><span class="sidenav_btn">&#9776;  Menu</span></td> -->

      <td style= "margin: 0px 0px; padding: 0px 0px; width:33.33%; float: left;">
        <div class="dropdown">
          <span class="dropbtn">&#9776;  Menu</span>
          <div class="dropdown-content">
            <a href="../index.html">Home</a>
            <a href="../leaderboard.html">Leaderboard</a>
            <a href="../about_us.html">About Us</a>
            <a class="active" href="slide1.html">Slides</a>
            <a style=" display: none;" id= "profile-button-text" href= "../profile/achievements.html" >Profile</a>
            <a style= "background-color: #ab727a; display: none;" id= "logout-button-text">Log Out</a>
          </div>
        </div>
      </td>

        <td class= "search_bar_td">
          <div class="dropdown-search">
            <input autocomplete="off" class= "search_bar" name="search" placeholder="Search..">
            <div class="dropdown-search-content">
              <a href="../index.html">Home</a>
              <a href="../leaderboard.html">Leaderboard</a>
              <a href="../about_us.html">About Us</a>
              <a class="active" href="slide1.html">Slides</a>
              <a style=" display: none;" id= "profile-button-text" href= "../profile/achievements.html" >Profile</a>
              <a style= "background-color: #ab727a; display: none;" id= "logout-button-text">Log Out</a>
            </div>
          </div>
        </td>


      <td style= "margin: 0px 0px; padding: 0px 0px; width:33.33%;">
        <ul style= "margin: 0px 0px; padding: 0px 0px;">
        <li class="navbar-logsin" id= "signup-button" style=" background-color: #72ab99">
          <a class= "topnav_a" id= "signup-button-text">Sign Up</a>
        </li>
        <li class="navbar-logsin" id= "login-button" style=" background-color: #73a872">
          <a class= "topnav_a" id= "login-button-text">Login</a>
        </li>
      </ul>
      </td>
    </tr>
  </table>

Это css

.search_bar {
  width: 240px;
  float: none;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  padding: 6px 10px 6px 30px;
  margin: 0 auto;
  outline: none;
}

.search_bar_td {
   float: center; 
   width: 33.33%;
   margin: 6px 0px;
   padding: 0px 0px;
}




.dropdown-search {
  width:100%;
  margin:0 auto;
  padding: 0px 0px;
  float: center;
  display:block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
}

.dropdown-search-content {
  display: block;
  position: absolute;
  background-color: #f9f9f9;
  height: 0px;
  width: 0px;
  max-height:150px;
  overflow-y:scroll;
  z-index: 1;
  float: center;
  margin: 6px 0px;
}


.search_bar:focus + .dropdown-search-content {
  height: auto;
  width: 240px;
}

Answer 1

Как сказал @cloned, вам вообще не нужно использовать таблицы. Я бы предложил использовать flexbox для такого типа вещей. Вот скрипка навигационной панели basi c с поисковым вводом и выравниванием по центру. Чтобы исправить вашу проблему, поместите выпадающий список. Я просто поместил абсолютный выпадающий список поиска относительно родительской оболочки

nav {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
}
 nav > ul {
	 display: flex;
	 align-items: center;
	 list-style: none;
	 width: 70%;
	 justify-content: space-around;
	 margin-left: 0px;
	 padding-left: 0px;
}
 nav .search {
	 width: 30%;
   position: relative;
}

.search ul {
  list-style: none;
  position: absolute;
  left: 0;
  padding-left: 0px;
}

<nav>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
  <div class="search">
    <input type="text" name="" id="searc-bar">
    <ul>
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
       <li><a href="#">Item 3</a></li>
       <li><a href="#">Item 4</a></li>
    </ul>
  </div>
</nav>