When looking at the image below, you will notice a div that contains a table with some content. However, when resizing the web browser's page, the table goes beyond the boundaries of the div.
https://i.sstatic.net/SRlzM.png
My goal is to reduce the size of the table as it scales down, while still displaying all of its contents without the need for a scrollbar or similar solution.
EDIT
#profileTable{
width:auto;
text-align:left;
color:#000080;
padding:30px 60px;
border:1px solid #ccc;
border-radius:4px;
background-color:white;
margin: 0 50px 50px;
}
#content{
margin: 0px 60px 0px;
background-color:#E9E9E9;
border:solid 1px grey;
flex: 1;
clear:both;
position:relative;
}<html>
<head>
</head>
<body>
<div id="content" >
<h2><center>Your profile</center></h2>
<table id="profileTable">
<tr>
<th>Username:</th>
<td>CONTENT</td>
</tr>
<tr>
<th>First name:</th>
<td>CONTENT</td>
</tr>
</table>
</div>
</body>
</html>