Não consigo alinha o TR da tabela com display flex | HTML e CSS

Olá, sempre que eu coloco display:flex em um tr para alinhar todos os td, ele quebra o titulo e o conteudo para lados opostos e não entendo por que isso acontece. A minha ideia é manter a tabela deste jeito que mandarei aqui e alinha os tr para que eles não quebrem e fiquem bem alinhados. Obs: estou usando typescript e react.js para fazer o codigo. CSS: .table { width: 100%; height: 230px; overflow: overlay; table { width: 100%;

  thead th {
    position: sticky;
    top: 0;
    background-color: ${({ theme }) => theme.colors.secondary10};
    z-index: 1;
  }
  tbody {
    overflow-y: scroll;
    height: 100%;
    overflow: auto;
    tr {
      width: 100%;
      table-layout: fixed;

      .order-icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .svg-div {
        display: flex;
        gap: 10px;
      }
      .svg-button {
        color: ${({ theme }) => theme.colors.primary};
        border: 2px solid ${({ theme }) => theme.colors.primary};
        padding: 5px;
        cursor: pointer;
        border-radius: 2px;
      }
      .atualization {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }
  }

  th,
  td {
    padding: 8px;
    text-align: left;
  }
}

}

HTML:

	Produto	Status	Preço	Última atualização	Ações
	Ambulancia teste 123....	<Status icon={} name={"Recebido"} />	R$ 12.500	20 min atrás

          <tr>
            <td className="order">
              <div className="order-icon">
                <BiCube size={20} />
              </div>
            </td>
            <td>Ambulancia teste 123....</td>
            <td>
              <div>
                <Status icon={<BiLike size={20} />} name={"Entregue"} />
              </div>
            </td>
            <td>R$ 12.500</td>
            <td className="atualization">
              <BiTime size={20} /> <p>20 min atrás</p>
            </td>
            <td>
              <div className="svg-div">
                <BiDollar size={20} className="svg-button" />
                <BiEditAlt size={20} className="svg-button" />
              </div>
            </td>
          </tr>

          <tr>
            <td className="order">
              <div className="order-icon">
                <BiCube size={20} />
              </div>
            </td>
            <td>Ambulancia teste 123....</td>
            <td>
              <div>
                <Status
                  icon={<BiPaperPlane size={20} />}
                  name={"Solicitado"}
                />
              </div>
            </td>
            <td>R$ 12.500</td>
            <td className="atualization">
              <BiTime size={20} /> <p>20 min atrás</p>
            </td>
            <td>
              <div className="svg-div">
                <BiDollar size={20} className="svg-button" />
                <BiEditAlt size={20} className="svg-button" />
              </div>
            </td>
          </tr>

        
        </tbody>
      </table>
    </div>

Depois de investigar um pouco, encontrei algumas soluções que podem ajudar a resolver esse problema:
Aplique um estilo específico para a primeira linha da tabela (o cabeçalho) usando o seletor :first-child no CSS. Isso garante que ele fique fixo no topo da tabela quando você rolar o conteúdo.
Defina uma largura fixa para as colunas da tabela usando a propriedade width nos elementos <th> correspondentes. Isso ajuda a garantir que as colunas tenham um tamanho consistente.
Para alinhar os elementos verticalmente dentro de uma célula da tabela, você pode usar a propriedade display: flex junto com align-items: center nas células que precisam ser alinhadas verticalmente. Isso garantirá que os elementos estejam centralizados verticalmente dentro das células.
Certifique-se de que a estrutura da tabela esteja correta, com as células <td> correspondentes em cada linha. Verifique se não há células extras ou faltando em qualquer linha da tabela.
Espero que essas dicas sejam úteis para resolver o problema de alinhamento dos elementos na tabela. Se você tiver mais alguma dúvida, não hesite em perguntar!

Mergulhe em programação