0

I need some help please, I have search a lot and found how to get fixed 1st column and fixed header just using CSS, it works but it has some problems. The first column header doesn't remain fixed, the entire 1st column remains fixed like I want but the title doesn't. Everything else works fine. This is my code:

//Code for fixed 1st column, Section1 is the ID of a DIV containing the table

.Section1 {
    margin: auto;
    margin-top: 3rem;
    overflow-x: auto;
}
    
tr>th:first-child,tr>td:first-child {
    position: sticky;
    background: #eca980;
    left: 0;
}

//Code for fixed headers

table th {
    position:sticky;
    top:0;
    z-index:1;
    border-top:0;
    background: #ededed;
}

enter image description here

Here is the HTML Part:

<div id="Section1" class="Section" style="WIDTH: 300px">
  <table class="Grid" cellspacing="2" cellpadding="1" border="0">
    <tbody>
      <tr class="GridTitle" style="BACKGROUND: none transparent scroll repeat 0% 0%">
        <th style="FONT-SIZE: 11pt; TEXT-DECORATION: none; FONT-FAMILY: 'Calibri'; WIDTH: 150px; FONT-WEIGHT: bold; FONT-STYLE: normal" nowrap="nowrap">
          Producto</th>
        <th style="FONT-SIZE: 11pt; TEXT-DECORATION: none; FONT-FAMILY: 'Calibri'; WIDTH: 85px; FONT-WEIGHT: bold; FONT-STYLE: normal" nowrap="nowrap">
          Abrv.</th>
        <th style="FONT-SIZE: 11pt; TEXT-DECORATION: none; FONT-FAMILY: 'Calibri'; WIDTH: 85px; FONT-WEIGHT: bold; FONT-STYLE: normal" nowrap="nowrap">
          Abrv.</th>
        <th style="FONT-SIZE: 11pt; TEXT-DECORATION: none; FONT-FAMILY: 'Calibri'; WIDTH: 85px; FONT-WEIGHT: bold; FONT-STYLE: normal" nowrap="nowrap">
          Abrv.</th>
        <th style="FONT-SIZE: 11pt; TEXT-DECORATION: none; FONT-FAMILY: 'Calibri'; WIDTH: 85px; FONT-WEIGHT: bold; FONT-STYLE: normal" nowrap="nowrap">
          Abrv.</th>
        <th style="FONT-SIZE: 11pt; TEXT-DECORATION: none; FONT-FAMILY: 'Calibri'; WIDTH: 85px; FONT-WEIGHT: bold; FONT-STYLE: normal" nowrap="nowrap">
          Abrv.</th>
      </tr>
      
      //This Part is repeteaded 50 times
     <tr class="GridOdd" style="BACKGROUND: none transparent scroll repeat 0% 0%">
        <td style="WIDTH: 150px">2T - B207576P0500 1</td>
        <td style="WIDTH: 85px">CLIENTE1</td>
        <td style="WIDTH: 85px">CLIENTE2</td>
        <td style="WIDTH: 85px">CLIENTE3</td>
        <td style="WIDTH: 85px">CLIENTE4</td>
        <td style="WIDTH: 85px">CLIENTE5</td>
      </tr>
      
      </tbody>
  </table>
</div>
Alfredo Zea García-Calderón
  • 23
  • 4
  • Coudl you share the html and explain more on what you want. It seems that the first th has two elements inside with contents of 'Producto' and 'Abrv.'. Is it supposed to be like that? I am not sure that you are targetting the right elements here: tr>th:first-child,tr>td:first-child. – Dan Friedman Oct 11 '22 at 05:36
  • If you are trying to scroll a table horizontally and/or vertically, keeping the column headers and the row headers staying on screen and in synch with the data content columns and rows, then there is working solution at https://stackoverflow.com/questions/63531126/sticky-table-header-inside-overflow-x-div-with-100-width/73936569#73936569 – petern0691 Oct 11 '22 at 09:27
  • Dan Friedman: Ok, Added the HTML part, What I need is a grid that has de titles fixed son when I scroll down I won't lose the titles, also I need the first column to be fixed so when I scroll horizontally I won't lose that column. petern0691: Thank you I will look that information – Alfredo Zea García-Calderón Oct 11 '22 at 12:50

0 Answers0