如何去除React Bootstrap中Card内嵌Table的底部多余空白

出现多余空白是两处默认样式共同导致的：

• React Bootstrap 的Card组件未手动声明Card.Body时，会自动给内部元素包裹一层带上下内边距的card-body容器，底部内边距会产生空白
• Bootstrap 内置的Table组件默认带有margin-bottom: 1rem的底部外边距，额外撑出了底部空间

方案1：使用Bootstrap内置工具类（无需额外写自定义CSS，推荐） #

直接修改组件代码，通过Bootstrap自带的间距工具类移除多余边距即可：

const Market = ({ marketName, selections }) => {
  return (
    <div className="market-wrapper">
      <Card>
        <Card.Header className="market-header">{marketName}</Card.Header>
        {/* 手动声明Card.Body，用pb-0移除底部内边距 */}
        <Card.Body className="pb-0">
          {/* 给Table加mb-0移除默认底部外边距 */}
          <Table size="sm" striped bordered hover className="mb-0">
            <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.Body>
      </Card>
    </div>
  );
};

方案2：追加自定义CSS规则 #

如果你不想调整组件结构，可以直接在现有CSS文件中添加如下规则：

/* 移除Card默认生成的card-body的底部内边距 */
.market-wrapper .card .card-body {
  padding-bottom: 0;
}
/* 移除Table的默认底部外边距 */
.market-wrapper .table {
  margin-bottom: 0;
}

如果Table底部边框和Card底部有样式重合问题，可以把padding-bottom: 0调整为padding-bottom: 1px微调即可。

内容的提问来源于stack exchange，提问作者clattenburg cake