时间戳

首页 > 解决方案 > 数组 reactjs 的可滚动单元格

html - 数组 reactjs 的可滚动单元格

问题描述

我在 reactjs 中使用了一个表格，我想修复单元格的大小，所以如果我里面有一个很大的段落，它只会显示那个单元格的滚动。我该如何实施？

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

标签： htmlcssreactjsscroll

解决方案

.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”属性，因为这是反应代码

推荐阅读