Antd中如何自定义表格行高？答案

【问题标题】：How to customize table row height in Antd?Antd中如何自定义表格行高？
【发布时间】：2022-02-15 02:20:26
【问题描述】：

Antd 带有一个不错的表格组件，但我在the docs 中找不到任何关于如何配置表格“密度”的信息，即表格行的默认高度，也许还有字体大小。

默认情况下，表格有一个宽敞的布局：

我有一个用例需要更多更小/更密集的行（想想 Excel 等典型电子表格程序中的密度）。

我是 Antd 的新手，我不知道从哪里开始。我需要自定义 Antd 的 CSS 吗？实现它的正确机制是什么，在单元格或行级别上配置高度，或者更确切地说是弄乱填充？我之所以选择 Antd，是因为我希望这样的事情不需要太多的 CSS 知识，我是否遗漏了什么？

【问题讨论】：

标签： css reactjs antd

【解决方案1】：

您可以通过 css 设置您的 Tag 样式。如果你想设置antd table 的样式，那么你应该定位antd 类。

const columns =[
...
{
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: tags => (
      <span>
        {tags.map(tag => {
          let color = tag.length > 5 ? "geekblue" : "green";
          if (tag === "loser") {
            color = "volcano";
          }
          return (
            <Tag color={color} key={tag} className="my-tag">
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </span>
    )
  },
...
]

css

/* table */
.ant-table {
  font-size: 9px;
}

/* row data */
.ant-table-tbody > tr > td {
  height: 5px;
  padding: 4px;
}
/* row tags */
.my-tag {
  font-size: 12px;
}
.ant-table-thead > tr > th {
  height: 5px;
  padding: 4px;
}

【讨论】：

我想知道这是否也可以使用样式组件？（我被告知这是这些天要走的路，现在我很困惑，似乎仍然有必要为类似的事情弄乱通常的 CSS 覆盖）。
是的！您也必须在样式组件中定位antd classes。
const LocalStyledTable = styled(Table)` ...为你的 antd 类设置样式`
感谢您的提示！令我困惑的是，我只能设置 <Table> 组件的样式，但就 DOM 而言，我想设置 <td> 左右的样式。可能这只是在样式 styled(Table) 上使用适当的子选择器（如 table > tr > td）的问题...
我认为您的问题不是针对样式化的组件。对于样式化组件中的 antd 样式，请发布另一个问题。如果我有时间，我会解决它。

【解决方案2】：

我在这里遇到同样的问题，根据@blueseal 的回答，我用 Styled-Components 以这种方式完成了行高！

我的 JSX

 <MyTable rowKey="id" dataSource={list} columns={columns} />

我的 CSS

import { Table } from 'antd'

export const MyTable = styled(Table)`
  tbody {
    tr {
      td {
        height: 5px;
        padding: 4px;
      }
    }
  }
`

希望能帮助到别人！

【讨论】：

【解决方案3】：

在 Ant-Design 文档中，您可以找到更改表格大小和外观的方法：

例如：

ReactDOM.render(
  <div>
    <h4>Middle size table</h4>
    <Table columns={columns} dataSource={data} size="middle" />
    <h4>Small size table</h4>
    <Table columns={columns} dataSource={data} size="small" />
  </div>,
  mountNode,
);

正确的做法是添加以middle和small为参数的size属性。此细节仅适用于 Modals 中排列的表格，否则最好不要使用包含的类进行响应式设计并添加自定义 css 修饰符。例如，我正在创建一个应用 Ant-Design 的工资单系统，在员工表中，我使用文档中所示的响应式 css 类显示它：

我在模态对话框中为表格应用属性 size = "small"：

希望这些知识对你有用。

【讨论】：

为什么小尺寸只在模态下有效？
因为 Ant Design Group 设计了层叠样式表，因此表格非常小，因此它们在模态对话框中的视觉效果是这样的，因此您可以将表格放置在任何大小，只要它在页面上即可。主网站

【解决方案4】：

@Jorge Pirela 解决方案解决了这个问题。只需在表格组件中添加 size 属性，如下所示

 <Table columns={columns} dataSource={data} size='small'/>

【讨论】：