title: Can we freeze columns in HTML on basis of colgroup?
body: <p>I was dealing with complex tabular data and wanted to freeze the header and column heading but on the &quot;col&quot; tag.
  I can freeze the row heading with position sticky for each tag but then for the second heading when I use-value of the width in the left position the table distorts in some large screens.</p>
  <pre><code>th{
  position:sticky;
  }
  tr:nth-child(1){
  left:0;
  }
  tr:nth-child(1){
  left:5%;
  }
  </code></pre>
  <p>this doesn't works on large screens.</p>
  <p>Sample data:</p>
  <pre><code>&lt;table border = 1&gt;
    &lt;colgroup&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
      &lt;col style=&quot;widht:5%;&quot; width=&quot;5%&quot;/&gt;
    &lt;/colgroup&gt;
    &lt;thead&gt;
      &lt;tr&gt;
          &lt;th colspan=&quot;20&quot;&gt;table heading&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th colspan=&quot;10&quot;&gt;table subheading 1&lt;/th&gt;
          &lt;th colspan=&quot;10&quot;&gt;table subheading 2&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th colspan=&quot;5&quot;&gt;table sub1-subheading 1&lt;/th&gt;
          &lt;th colspan=&quot;5&quot;&gt;table sub1-subheading 2&lt;/th&gt;
          &lt;th colspan=&quot;5&quot;&gt;table sub2-subheading 1&lt;/th&gt;
          &lt;th colspan=&quot;5&quot;&gt;table sub2-subheading 2&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th colspan=&quot;3&quot;&gt;table sub1-subheading 1&lt;/th&gt;
          &lt;th colspan=&quot;2&quot;&gt;table sub1-subheading 2&lt;/th&gt;
          &lt;th colspan=&quot;3&quot;&gt;table sub2-subheading 1&lt;/th&gt;
          &lt;th colspan=&quot;2&quot;&gt;table sub2-subheading 2&lt;/th&gt;
          &lt;th colspan=&quot;3&quot;&gt;table sub1-subheading 1&lt;/th&gt;
          &lt;th colspan=&quot;2&quot;&gt;table sub1-subheading 2&lt;/th&gt;
          &lt;th colspan=&quot;3&quot;&gt;table sub2-subheading 1&lt;/th&gt;
          &lt;th colspan=&quot;2&quot;&gt;table sub2-subheading 2&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
          &lt;th rowspan=&quot;2&quot;&gt;col heading 1&lt;/th&gt;
          &lt;th&gt;col heading 2&lt;/th&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;col heading 2&lt;/th&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
          &lt;td&gt;data&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>