javascript - 如何修复表格的高度 - 语义 UI

Question

我正在使用语义-ui-react，但我也对特定于语义-ui 的答案持开放态度。

我有一个分页表，但有一个问题。可以有更少行的最后一页采用不同的高度。我想知道如何固定桌子的高度。

我的代码很简单：

  <Table singleLine>
    <TableHeader data={ entities } columns={ columns }/>
    <Table.Body>
      { tableBody }
    </Table.Body>
    { paginator }
  </Table> 

TableHeader是：

  <Table.Header>
    <Table.Row>
      {
        _.map(columns, column => {
          return <Table.HeaderCell>{ column(data) }</Table.HeaderCell>;
        })
      }
    </Table.Row>
  </Table.Header>

tableBody是：

  for (let index = pageSize * pageIndex; index < Math.min(pageSize * (pageIndex + 1), entities.length); index++) {
    tableBody.push(<TableRow data={ entities[index] } rowConfig={ rowConfig }/>);
  }

并且tableRow是：

  <Table.Row>
    {
      _.map(rowConfig, cellConfig => {
        return <Table.Cell>{ cellConfig(data) }</Table.Cell>;
      })
    }
  </Table.Row> 

标签： javascriptsemantic-ui

Answer 1

如果我很好地理解了您的问题，您为什么不在组件上使用具有最小高度的 css 类，就像这样

.min-height {
    min-height:397px;
}