Question 416161 in Html Question posted in
Some basic documentation can be found here.

How to change the height of table rows in html

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>
  )
}

Setting h-[10%] to tr has no effect on the height of the row. The height can be of a fixed value such as 10px but setting it to h-[10%] doesn’t work. Essentially what I’m trying to achieve is have each row occupy 10% of the total height so I can have 10 rows in a table.

Tags:

2

Answers


  1. 0
    • Set a fixed height on the parent element or its container.
    • Apply the height style directly to the <tr> or <td> elements.
    Login or Signup to reply.
  2. 0

    The result you trying to achieve is actually default behavior of table. So if you have table height set to 100px then by default each row will occupy 10% of table height (assuming you have 10 rows). You don’t need to apply any additional css to row just add desired height to table thats all. Below is working example of same.

    body {
  margin: 0;
  padding: 0;
}

tr,
td {
  border: 1px solid black;
}

table {
  height: 50vh;
  border: 1px solid red;
}
    <table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search