HTML / CSS可以垂直和水平滚动(具有固定的列宽)

时间:2017-10-10 21:22:49

标签: html css

我有一个使用Libre calc生成的HTML表格,如下所示:

<!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>

我需要的是一张CSS工作表,在垂直和/或水平滚动时固定第一行。 列宽也应该保留。 奖励将是,如果,前三列也可以在滚动时修复。 (就像excel / calc中的冻结单元功能一样)。

我尝试了不同的方法,但都导致了混乱的标题(不同的列宽,然后是内容)。

感谢任何帮助。

0 个答案:

没有答案