CODEWITHSUNDEEP
htmlcssreactjs
c0micrage
c0micrage

Reputation: 1180

html css table td control adjust width based on screen resolution and content

I have a react js app where 1 page has a table with tbody, tr, and td. The table has only two columns aka td tags. I would like the first column to automatically adjust the screen resolution and content. I tried width:"fit-content", width:"auto", but the width is about 50% of the table width. It only works when I change it to width:"20%" but the width is not correct for different resolution. I read other posts here but have not found anything that works so far. Here is my code so far

<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%

I tried table-layout: auto but my table runs off the page so I think I need to keep it fixed. but the width on the first td is does not correctly to its content.

Upvotes: 0

Views: 1135

Answers (1)

zhugen
zhugen

Reputation: 380

You may try <td style="width:20vw">, to fix the colum width to 20% of the viewport's resolution.

Upvotes: 1

Related Questions