javascript - 反应卡中的引导表

Question

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

如您所见，该Away行下方还有一些额外内容。这是我的反应代码：

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
  }

Table有人可以帮我修剪一下底部Card吗？

标签： javascriptcssreactjsreact-bootstrap

Answer 1

组件中有一个默认值margin-bottom，您可以通过添加一个到组件并设置为Table来删除它：classNameTablemargin-bottom0

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