CODEWITHSUNDEEP
htmlcssfixed-header-tables
Alfredo Zea García-Calderón
Alfredo Zea García-Calderón

Reputation: 23

HTML + CSS fixed Colum and fixed headers

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>

Upvotes: 0

Views: 60

Answers (0)

Related Questions