scrollable cell of array reactjs

I am using a table in reactjs and i want to fix the size of cells, so if i have a big paragraphe inside it it will show a scroll for that cell only. how can i implement this?

renderTableData() {
    return this.state.Offers.map((offer, index) => {
       const {  name, website} = offer
       return (
          <tr >
       
             <td>{name}</td> // i want to make this part scrollable if the size of text is bigger
             <td>{website}</td>
          
          </tr>
       )
    })
 }

.name {
  height: 60px;
  width: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="name">
        if the cell contains too large data it will appear the scrollbar
      </div>
    </td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>small cell</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Note: Use "className" attribute as this is react code