Zum Inhalt springen

CSS-Seite reagiert nicht ganz so wie sie soll


Gawan

Empfohlene Beiträge

Hallo zusammen,

ich hab mir mit ASP und CSS eine Seite gebaut mit der ich Daten aus einer Datenbank abrufe.

Die Seite findet ihr hier:

Scrollable Table with Fixed Header, repeat print header and footer

Mein Problem ist, dass der obere Teil der Seite (also die Überschrift) der gleichen CSS-Definition unterlegen ist wie die untere Datentabelle.

Ich würde mir aber wünschen dass der obere Teil eine fix definierte Höhe hat und die untere Datentabelle den Rest der Seite (unabhängig von der Auflösung) einnimmt.

Der Code der mir die Seite erzeugt sie in etwas so aus:


<link rel="stylesheet" href="stylechris.css" type="text/css">

<style type="text/css">


div.tableContainer {

    width: 100%;        /* table width will be 99% of this*/

    height: 350px;     /* must be greater than tbody*/

    overflow: auto;

    margin: 0 auto;

    }


table {

height: 100px;

    width: 100%;        /*100% of container produces horiz. scroll in Mozilla*/

    border: solid 0px slategray;

    }


table>tbody    {  /* child selector syntax which IE6 and older do not support*/

    overflow: auto;

    height: 300px;

    overflow-x: hidden;

    }


thead td    {

    font-size: 14px;

    font-weight: bold;

    text-align: center;

    background-color: papayawhip;

    color: steelblue;

    border-top: solid slategray 0px;

    border-bottom: solid 0px slategray;

    position:relative;

    top: expression(document.getElementById("data").scrollTop-2); /*IE5+ only*/

    }


td    {

    color: #000;

    padding-right: 2px;

    font-size: 12px;

    text-align: right;

    font-family: Arial,sans-serif;

    border-top: solid 0px slategray;

    border-left: solid 0px slategray;

    }




tfoot td    {

    text-align: center;

    font-size: 11px;

    font-weight: bold;

    background-color: papayawhip;

    color: steelblue;

    border-top: solid 2px slategray;

    }


td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/


</style>



</head>


<body>



<form name="test" action="testpage.asp" method="get">

<table border="0">

  <tr>

      <td valign="bottom" align="center">Channel</td>

    <td valign="bottom" align="center">Planner</td>

    <td valign="bottom" align="center">LVL</td>

    <td valign="bottom" align="center">Ordertyp</td>

    <td valign="bottom" align="center">Item Filter</td>

    <td valign="bottom" align="center">CCD Filter</td>

    <td valign="bottom" align="center">Datum bis:</td>

  <td> </td>


  </tr>

<tr>

</table>

</form>


<HR ALIGN="LEFT" WIDTH=750 COLOR="#FF0000">


<div id="container">


<div class="tableContainer" id="data">

  <table cellspacing="0" border="2">

     <thead>

      <tr>

        <td >Date1</td>

           <td >Date2</td>

    <td >Date3</td>

    <td >Date4</td>

    <td >Date5</td>

    <td >Date6</td>

        <td >Date7</td>

    <td >Date8</td>

    <td >Date9</td>

    <td >Date10</td>

    <td >Date11</td>

      </tr>

    </thead>

    <tfoot>

      <tr>

        <td width="100%" colspan="5">Table footer repeats on print</td>

      </tr>


    </tfoot>

    <tbody>

<%

RS.Open "SELECT * FROM traffic;", objConn, 3,3

    Do While Not RS.EOF

        response.write("<TR>")

            For i = 0 to RS.Fields.Count - 1

            tmp_rs=rs(i)

            if tmp_rs="" then

                    response.write("<TD VALIGN=TOP> </TD>")

        else

            response.write("<TD VALIGN=TOP>" & tmp_rs &  "</TD>")

                end if

        Next

           response.write("</TR>")


            RS.MoveNext

            Loop

RS.Close

objConn.Close


%>

    </tbody>

  </table>


</div>



</div> <!-- end container -->

</body>

</html>

Kann mir da eventuell jemand helfen ??

Danke

Gawan

Link zu diesem Kommentar
Auf anderen Seiten teilen

browserfensterabhängige höhe kannst du in einem Div-Layout nur mit hilfe von Javascript erreichen.

das heist, höhe auslesen, davon den Titel und Footer abziehen und das dann als height in den Container geben.

ich benutze ein solches Script recht häufig und habe nur gute erfahrungen damit.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...