数组reactjs的可滚动单元格

Question

我在 reactjs 中使用 table 并且我想修复单元格的大小，所以如果我在其中有一个大段落，它将只显示该单元格的滚动。我该如何实施？

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

Answer 1

.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 appearrrr theee 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>

注意：使用“className”属性，因为这是反应代码

数组reactjs的可滚动单元格

scrollable cell of array reactjs

html

css

scroll

reactjs