CODEWITHSUNDEEP
htmlcsshtml-tableantd
Kyle Calica-St
Kyle Calica-St

Reputation: 2953

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

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

Upvotes: 2

Views: 411

Answers (2)

Fiodorov Andrei
Fiodorov Andrei

Reputation: 2018

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)

Upvotes: 1

Kyle Calica-St
Kyle Calica-St

Reputation: 2953

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

Upvotes: 0

Related Questions