CSS失效时，如何为Ant Design表格含展开行的行添加边框？

问题描述 #

使用带有可展开行的Ant Design表格时，主表格行及展开的嵌套表格行均无边框，希望添加边框提升视觉结构化，同时不破坏现有布局或与Ant Design默认样式冲突。相关代码如下：

return (
    <>
      <Row  className="margin-bottom-m" gutter={[0, 10]} align="middle">
      <Col span={24}>
          <Row className="text-gray breadcrumb">
            <span onClick={() => history.push("/decarbonization/facilities")} className="c-pointer">
              Facilities
            </span>
              <>
                <span
                  onClick={() => history.push(`/user/${facility_id}`)}
                  className="c-pointer"
                >
                  &nbsp;
                </span>
                <span className="text-primary fw-600">
                  &nbsp;&nbsp;{">"} {form.getFieldValue('facility_name')}
                </span>
              </>
          </Row>
        </Col>
      </Row>
      
      <Row>
        <Col span={24}>
      <Form 
        form={form} 
        layout="vertical" 
        name="add_facility_form"
        validateTrigger={['onSubmit', 'onBlur', 'onChange']}
        onFinish={(e) => onFinish(e)}
      >
        <Col className='formstyle1'>
        <Row gutter={16}>
          <Col span={18}>
            <Form.Item
              name="facility_name"
              label={t('general.facilityName')}
              rules={[{ required: true, message: `${t('general.pleaseInputTheFacilityName')}}!` }]}
            >
              <Input placeholder= {t('general.facilityName')} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={9}>
            <Form.Item  name="facility_address"
              label= {t('general.address')}>
              <GooglePlacesAutocomplete
                    form={form}
                    usage="facilities"
                  />
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="country" label= {t('general.country')} rules={[{ required: true, message: t('general.pleaseSelectACountry') }]}>            
              <Select placeholder={t('general.country')} onChange={handleChangeCountry} allowClear showSearch>
                {Countries.country().map((val:any, i:any) => (
                  <Option key={i} value={val}>
                    {val}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        </Col>
        <Divider />
      
        <Table
          className="custom-table" 
          columns={electricityColumns}
          dataSource={electricityUsageData}
          components={components}
          rowClassName={() => 'table-row'}
          tableLayout="fixed"
          footer={() => (
            <Row>
              <Button onClick={() => addYearData(getPreviousYear())} disabled={isPreviousYearDisabled()} icon={<PlusOutlined  className='addButton' />} type="link">
                Add {getPreviousYear()} data
              </Button>
            </Row>
          )}
          expandable={{
            expandedRowRender: (record) => (
              <Table
                columns={purchaseColumns}
                dataSource={record.purchases}
                pagination={false}
                bordered={false}
                tableLayout="fixed"
              />
            ),
          }}
          pagination={false}
        />
    
        <Row justify="end">
          <Space style={{ margin: '20px 0px 0px 0px' }} wrap={true}>
            <Form.Item>
              <Button type="primary" htmlType="submit" icon={<SaveOutlined />}>
                SAVE
              </Button>
            </Form.Item>
          </Space>
        </Row>
      </Form>
      </Col>
      </Row>
      <DynamicDialog
        visibility={isModalVisible}
        onSetVisibility={setIsModalVisible}
        onCancel={handleCancel}
        content={{
          component: 
          <AddExternalEacModal 
          handleSave={handleSave} 
          handleCancel={handleCancel} 
          facilityName={facilityName} 
          selectedYear={year}
          technologies={technologies}
          />,
          footer: null,
          width: 550
      }}
        closable={true}
        className="external-eac-modal"
      />
      <DynamicInfoModal visible={openInfo} setVisible={setOpenInfo} {...infoConfig} />

      </>
  );

解决方案 #

方式一：自定义CSS覆盖（推荐） #

利用你已经给主表格添加的custom-table类，通过CSS精准定位表格行，添加边框同时避免全局样式冲突，保持Ant Design风格统一：

/* 主表格数据行添加底部边框 */
.custom-table .ant-table-tbody > tr.table-row > td {
  border-bottom: 1px solid #f0f0f0; /* 使用Ant Design默认边框色，保持视觉统一 */
}

/* 展开行内的嵌套表格数据行添加底部边框 */
.custom-table .ant-table-expanded-row .ant-table-tbody > tr > td {
  border-bottom: 1px solid #f0f0f0;
}

/* 可选：给表头添加底部边框，增强结构感 */
.custom-table .ant-table-thead > tr > th {
  border-bottom: 1px solid #f0f0f0;
}

优势：

• 仅作用于目标表格（通过custom-table类限定范围），不会影响其他页面的Ant Design表格
• 使用框架默认色值，避免视觉风格冲突
• 不会破坏原有表格布局，边框仅在行之间展示，保持表格紧凑性

方式二：利用Ant Design自带bordered属性 #

如果希望快速给表格添加完整边框（包括表格外层边框），可以修改表格的bordered属性：

1. 主表格添加bordered={true}：

<Table
  className="custom-table" 
  columns={electricityColumns}
  dataSource={electricityUsageData}
  components={components}
  rowClassName={() => 'table-row'}
  tableLayout="fixed"
  bordered={true} // 添加这一行
  // ...其他属性
/>

2. 嵌套表格修改bordered={true}（原代码为bordered={false}）：

<Table
  columns={purchaseColumns}
  dataSource={record.purchases}
  pagination={false}
  bordered={true} // 修改为true
  tableLayout="fixed"
/>

注意：

这种方式会给表格添加外层边框，嵌套表格可能会和主表格的边框产生视觉重叠，需要额外调整样式（比如给嵌套表格添加margin: 0 16px）来优化布局。

内容的提问来源于stack exchange，提问作者Zaheer Bashir