css - How to change the height of table rows in html - Stack Overflow

admin管理员组

文章数量:1122833

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.

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.

• html
• css
• reactjs
• frontend
• tailwind-css

Share Improve this question Follow edited Nov 22, 2024 at 15:34 Michael Xia asked Nov 22, 2024 at 14:52 Michael XiaMichael Xia 4944 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

• Set a fixed height on the parent element or its container.
• Apply the height style directly to the <tr> or <td> elements.

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>

In your example you're targeting the tr element to set the height.

Instead you have to target td to set it's height. Accordingly the height of the table will be decided.

Please have a look at following code.

body {
  margin: 0;
  padding: 0;
}

table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

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

table tbody tr td {
  height: 35px;
  width: 50px;
  text-align: center;
}

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

本文标签： cssHow to change the height of table rows in htmlStack Overflow