My React JS app has a page that features a table with tbody, tr, and td elements. The table consists of only two columns represented by the td tags. I am trying to make the first column adjust automatically based on screen resolution and content. I have experimented with width:"fit-content" and width:"auto", but both options seem to set the width at about 50% of the table's total width. When I switch it to width:"20%", it works better but still doesn't adjust correctly for different resolutions. I have searched through other posts without finding a solution that works for me. Below is the code I have tried:
<table className="myTable">
<tbody>
<tr>
<td width="fit-content">
<control1/>
<td width="auto" >
<control2/>
</td>
</td>
</tbody>
</table>
//css
.myTable
table-layout: fixed
width: 100%
After experimenting with table-layout settings, I realized auto setting causes my table to run off the page, so I need to keep it fixed. However, the width of the first td element does not accurately adjust to its content.