在卡片中反应 Bootstrap Table

Question

我遇到了一个问题，我想在我的 Card 组件中渲染一个 Table，但我希望 Table 的最后一行用 Card，如果这有意义的话。这是我目前正在渲染的示例：

如您所见，Away 行下方多了一点。这是我的 React 代码：

const Market = ({ marketName, selections }) => {
  return (
    <div className="market-wrapper">
      <Card>
        <Card.Header className="market-header">{marketName}</Card.Header>
          <Table size="sm" striped bordered hover>
            <tbody>
              {selections.map((selection) => (
                <tr key={selection.id}>
                  <td style={{ width: "50%" }}>{selection.name}</td>
                  <td style={{ width: "50%" }}>{selection.price.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </Table>
      </Card>
    </div>
  );
};

现在是 CSS:

.market-header {
    color: #fff;
    background-color: #44494f;
    padding: 2.5px 15px;
    border-bottom: solid 2px #c8ceae;
  }
  
  .market-wrapper {
    margin: 10px 10px 10px 10px
  }

有人可以帮我 trim 在 Card 中 Table 的底部吗？

Answer 1

Table component in react-bootstrap uses Bootstrap's styles for tables，在 table 元素上具有 margin-bottom: 1rem。您可以通过向 <Table> React 组件添加样式标签来覆盖它，如下所示：

<Table size="sm" striped bordered hover style={{marginBottom: 0}}>

或者，您可以创建一个新的 CSS class 并将其添加到 <Table> 组件：

.market-table {
  margin-bottom: 0;
}

<Table className="market-table" size="sm" striped bordered hover>

无论哪种情况，您的 table 现在都将移除多余的底部边距。

Answer 2

在 Table 组件中有一个默认的 margin-bottom，您可以通过将 className 添加到 Table 组件并将 margin-bottom 设置为 0:

.market-table {
  margin-bottom: 0 !important;
}

在卡片中反应 Bootstrap Table

React Bootstrap Table in Card

javascript

css

reactjs

react-bootstrap