如何更改html中表格行的高度

Question

export const Table = () => {
  const employees: Employee[] = [
    { name: "John Doe", position: "Manager", employed: "23/04/18" },
    { name: "Alex Nar", position: "Software Engineer", employed: "23/04/18" }
  ]

  return (
    <div className="w-1/2 h-1/2 overflow-scroll text-gray-700 bg-white shadow-md rounded-xl">
      <table className="w-full text-left min-w-max table-auto">
        <thead>
          <tr className=" h-[10%]">
            <Cell section="head" content="Name" />
            <Cell section="head" content="Position" />
            <Cell section="head" content="Employed" />
            <Cell section="head" content="" />
          </tr>
        </thead>
        <tbody>
          {employees.map((employee, index) => (
            <tr key={index}>
              <Cell section="body" content={employee.name} />
              <Cell section="body" content={employee.position} />
              <Cell section="body" content={employee.employed} />
              <Cell section="body" content={"Edit"} />
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

将 h-[10%] 设置为 tr 对行高没有影响。高度可以是固定值，例如 10px，但将其设置为 h-[10%] 不起作用。本质上我想要实现的是让每行占据总高度的 10%，这样我就可以在一个表中有 10 行。

Answer 1

• 在父元素或其容器上设置固定高度。
• 将高度样式直接应用于 或 元素。