How to make table columns equal in dynamic width inside a flex box-CodePudding

I have a table inside a flexbox as a form of navigation for my website. How do I make the table columns equal in width while allowing the table to scale dynamically? I also want to wrap the text of the data cells, so that the cell width does not change.

min-width: max-content;

}
section {
  margin: 3% auto;
}
nav {
  background-color: #0e1d54;
  margin-top: 0.6%;
  padding: 1px 0px;
}
.navbar {
  display: flex;
  flex-direction: row;
  margin: 0% 3%;
  justify-content: center;
}
.navbar table tr td {
  font-size: 20px;
}

<nav>
  <div >
    <table>
      <tr>
        <td><a>Home</a></td>
        <td><a>Family</a></td>
        <td><a>Cape Town</a></td>
        <td><a>Swim</a></td>
      </tr>
    </table>
  </div>
</nav>

CodePudding user response：

Try with

table{
   table-layout: fixed;
   width: 100%;
}

min-width: max-content;

}
section {
  margin: 3% auto;
}
nav {
  background-color: #0e1d54;
  margin-top: 0.6%;
  padding: 1px 0px;
}
.navbar {
  display: flex;
  flex-direction: row;
  margin: 0% 3%;
  justify-content: center;
}
.navbar table tr td {
  font-size: 20px;
}

table{
   table-layout: fixed;
   width: 100%;
}

<nav>
  <div >
    <table>
      <tr>
        <td><a>Home</a></td>
        <td><a>Family</a></td>
        <td><a>Cape Town</a></td>
        <td><a>Swim</a></td>
      </tr>
    </table>
  </div>
</nav>