Change the CSS of table
Application Type
Traditional Web

I have a little gap in my headers in the first column and the data columns are somehow shifted.

This is the code I currently have: 


/* Everyone Else's Grid */
@supports (display: grid) {
   .table {
     display: grid;
     grid-template-columns: min-content min-content;
     grid-template-rows: auto auto;
    grid-template-areas:
       "caption caption"
       "head body";
       margin: 0px;
       padding: 0px;
   }  
   .table thead {
     grid-area: head;
   }
   .table tbody {
     grid-area: body;
   }
   .table caption {
     grid-area: caption; 
   }
}

/* Flex - Cross Browser CSS */
.table thead {
  display: flex;
  flex-shrink: 0;
  min-width: min-content;
}
.table tbody {
    display: flex;
}
.table tr {
  display: flex;
  flex-direction: column;
  min-width: min-content;
  flex-shrink: 0;
}
.table td, .vertical th {
  display: block;
}
.table caption {
  display: block;
}

Thanks in advance.

Hello @Ajit Kurane,

In the web apps, the default height for a Table header is 48px and the Table row is 56px. This is the difference you are noticing.

So using CSS you may set the height for both headers and rows to be the same and that will take care the shift. For e.g. you could choose to increase the header height to be 56px (same as row height)

.TableRecords .TableRecords_Header, thead th {
    height:56px;
}

Regards,

AJ

Thanks Aj.  I will try this one.

Hello @Ajit Kurane 

Did you get a chance to verify the proposed solution?

Thanks

AJ

Hi @Ajit Kurane ,

Try for adding height and width, this will solve your problem. Use division for table.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.