thead and tbody have a line of space I can't get rid of

user_4775199 0
Viewed 120

I am trying to eliminate the space between the thead and tbody.

I am using styled-components on top of Antd UI framework.

From what I can tell it's not a border, margin, or padding. I can't even select the Whiteline between them.

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};
    }
  }`;

enter image description here

antd html-table css html
2 Answers

For remove border from table header you need to replace the default css styles:

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

Online example:

Edit Basic Usage - antd@4.9.4 (forked)

user_86605270

I was able to solve it. Just simply add this to the style component. I had forgotten to just simply remove the body or the head to discover first where the line was coming from. After that, it was easier to navigate in dev tools and see the border was coming from the row headers.

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