thead 和 tbody 有一条我无法摆脱的空间答案

【问题标题】：thead and tbody have a line of space I can't get rid ofthead 和 tbody 有一条我无法摆脱的空间
【发布时间】：2020-12-18 05:43:34
【问题描述】：

我正在尝试消除thead 和tbody 之间的空格。

我在 Antd UI 框架之上使用 styled-components。

据我所知，它不是边框、边距或填充。我什至无法选择它们之间的白线。

import { Table } from 'antd';

const StyledTable = styled(Table)`
  thead th {
    background-color: ${props => props.theme.colors.black1};
    color: ${props => props.theme.colors.white};
  }
  thead tr th:hover {
    background-color: ${props => props.theme.colors.secondary} !important;
    color: ${props => props.theme.colors.white};
  }
  tbody.ant-table-tbody tr:hover td {
    background-color: ${props => props.theme.colors.primaryHover};
    color: ${props => props.theme.colors.white};
  }
  tbody {
    tr {
      td {
        border: none;
        background-color: ${props => props.theme.colors.black2};
        color: rgba(255,255,255, 0.85);
        &:hover, &:focus {
          color: ${props => props.theme.colors.white};
        }
      }
    }
    tr:nth-child(even) td{
      background-color: ${props => props.theme.colors.black3};
    }
  }
  .ant-table-cell{
    div span svg {
      color: ${props => props.theme.colors.primary};
      fill: ${props => props.theme.colors.primary};
    }
    a, a:visited, a:hover{
      color: ${props => props.theme.colors.white};
    }
  }`;

【问题讨论】：

尝试设置th{border:none;}
我试过了，还是不行
thead{border:none !important} 和尝试使用 !important 怎么样，可能有一些样式需要被覆盖，因为它不起作用所以很难找到
它不是边框。我可以告诉我什么时候在开发工具中进行检查。我已经尝试了所有的边界变化，没有任何变化。
您能否在 codepen 或 stackblitz 中创建它的工作示例？

标签： html css html-table antd

【解决方案1】：

要从表格标题中删除边框，您需要替换默认的 css 样式：

.ant-table-thead > tr > th {
  border-bottom-color: ${(props) => props.theme.colors.black3};
}

在线示例：

【讨论】：

【解决方案2】：

我能够解决它。只需将其添加到样式组件即可。我忘记了只是简单地移除身体或头部以首先发现线来自哪里。之后，更容易在开发工具中导航并看到边框来自行标题。

   .ant-table-thead > tr > th {
        border-bottom: none;
      }

【讨论】：