HTML/CSS make scroll able vertically and horizontally (with fixed column widths)

Question

I have a HTML Table produced using Libre calc looking something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>
<HEAD>

    <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">

    <META NAME="GENERATOR" CONTENT="LibreOffice 4.1.6.23.0 (Windows)">


    <STYLE>
        <!-- 
        BODY,DIV,TABLE,THEAD,TBODY,TFOOT,TR,TH,TD,P { font-family:"Arial"; font-size:x-small }
         -->
    </STYLE>

</HEAD>

<BODY TEXT="#000000">
<TABLE CELLSPACING="0" COLS="14" BORDER="0">
    <COLGROUP WIDTH="99"></COLGROUP>
    <COLGROUP WIDTH="124"></COLGROUP>
    <COLGROUP WIDTH="310"></COLGROUP>
    <COLGROUP WIDTH="430"></COLGROUP>
    <COLGROUP WIDTH="200"></COLGROUP>
    <COLGROUP WIDTH="300"></COLGROUP>
    <COLGROUP WIDTH="230"></COLGROUP>
    <COLGROUP WIDTH="190"></COLGROUP>
    <COLGROUP WIDTH="140"></COLGROUP>
    <COLGROUP WIDTH="150"></COLGROUP>
    <COLGROUP WIDTH="120"></COLGROUP>
    <COLGROUP SPAN="2" WIDTH="130"></COLGROUP>
    <COLGROUP WIDTH="320"></COLGROUP>
    <TR>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" HEIGHT="40" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>123456</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>123456789123</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>1234567</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>1234567891234567</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>123456</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>123456789123456 123456789</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>123456789123456 12345678</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>abcdefghijklmnopqrstuvw</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>123456789 123456789123</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>12345678912</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>12345678912345</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>123456789123456789</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>1234567890123456</FONT></B></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=MIDDLE BGCOLOR="yellow"><B><FONT SIZE=3>abcdefghijklmno</FONT></B></TD>
    </TR>


    <TR>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" HEIGHT="20" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3 COLOR="#000000"><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
    </TR>
    <TR>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" HEIGHT="20" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3 COLOR="#000000"><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
    </TR>
    <TR>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" HEIGHT="20" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3 COLOR="#000000"><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="CENTER" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP BGCOLOR="white"><FONT SIZE=3><BR></FONT></TD>
        <TD STYLE="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" ALIGN="LEFT" VALIGN=TOP><FONT SIZE=3><BR></FONT></TD>
    </TR>
</TABLE>
<!-- ************************************************************************** -->
</BODY>

</HTML>

What I need is a CSS sheet making the first row fixed while scrolling vertically and/or horizontally. The column widths should be preserved,too. Bonus would be if, the first three columns could also be fixed while scrolling. (Just like the freeze cells functionality in excel/calc).

I tried different approaches but all lead to a messed up header (different column width then content).

Any Help is appreciated.

Here's a link to a previous solution. https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — DollarChills, Oct 10 '17 at 22:32
Possible duplicate of [how do I create an HTML table with fixed/frozen left column and scrollable body?](https://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) — DollarChills, Oct 10 '17 at 23:18

HTML/CSS make scroll able vertically and horizontally (with fixed column widths)

0 Answers0