html css управление таблицей td регулирует ширину в зависимости от разрешения экрана и содержимого

Question

У меня есть приложение реагирования js, где на 1 странице есть таблица с tbody, tr и td. В таблице есть только два столбца, называемые тэгами. Я бы хотел, чтобы первый столбец автоматически настраивал разрешение экрана и контент. Я пробовал width: "fit-content", width: "auto", но ширина составляет около 50% ширины таблицы. Это работает только когда я изменяю его на ширину: «20%», но ширина не подходит для другого разрешения. Я прочитал другие посты здесь, но не нашел ничего, что работает до сих пор. Вот мой код до сих пор

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

Я пробовал раскладку таблицы: авто, но моя таблица сбрасывается со страницы, поэтому я думаю, что мне нужно ее исправить. но ширина первого тд не соответствует его содержанию.

Answer 1

Вы можете попробовать <td style="width:20vw">, чтобы зафиксировать ширину столбца до 20% от разрешения области просмотра.