Tailwind CSS - Scrollable Table Cell

How can I give a fixed height to the Address table cell and make it scrollable

https://play.tailwindcss.com/S0U6GkmoS6

<table class="w-full border-2">

  <thead>
    <tr class="border-2">      
        <td class="w-4/12">Id</td>
        <td class="w-4/12">Name</td>
        <td class="w-4/12">Address</td>      
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="w-4/12">1</td>
      <td class="w-4/12">Name 1</td>
      <td class="w-4/12  max-h-5 overflow-y-auto">Address 1
      Address 1Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      Address 1Address 1Address 1Address 1Address 1
      </td>
    </tr>
  </tbody>



</table>

tykus

4 years ago

Best Answer

Level 104

Place a div inside the table cell, move the overflow-y rule onto that:

<td class="w-4/12  max-h-5">
    <div class="w-full h-5 overflow-y-auto">
		Address 1...
    </div>
</td>

zaster

4 years ago

Level 9

@tykus

Thanks. It works.

Is it essential to have max-h-5 ?

tykus

4 years ago

Level 104

Is it essential to have max-h-5 ?

Actually, no; the cell height will be determined by the height of the div

Thanks. It works.

No worries; mark the thread closed in that case.

Please or to participate in this conversation.