ansaurus

Question

Answer 1

A:

Do you want the table name to be inside the panel with the table? If so, I think it should be pretty straightforward, but maybe I am missing something.

If you want the table name to be positioned outside the panel it comes from, perhaps you could use the CSS property position: absolute (along with a top and left property) to put it at the top of the page.

Alternatively, you may want to use javascript to re-parent the div. For example, if you create an empty div at the top of the page, where you want the title to go, and give it an id titleParent and put the title in a div with id parent, the following javascript snippet should move the title div from the bottom panel to the top div:

var title = document.getElementById('title');
document.getElementById('titleParent').appendChild(title);

Just put that snippet in a <script> block after the bottom panel.

pkaeding 2009-01-23 12:37:24

Answer 2

+2 A:

I assume you mean to be able to scroll the table without moving the header?

I think your easiest option is the CSS overflow property.

<style type="text/css">
  div#dblist {
    overflow: scroll;
    height: 400px;
  }
</style>

<!-- ... -->

<div>Database Title</div>
<div id="dblist">
  <table>
    <!-- ... -->
  </table>
</div>

@Joshxtothe4: It sounds like you've got scrolling set to the wrong element:

<div> <!-- sounds like you have it set here -->
  <div><h1>Query Archive</h1></div>
  <div> <!-- and want it set here -->
    <table>
      <!-- ... -->
    </table>
  </div>
</div>

You shouldn't need absolute positioning for this.

Jonathan Lonowski 2009-01-23 12:39:38

That is basically what I did, as the table layer was already set to scroll, so I just put the header in a separate layer, but it made no difference..

Joshxtothe4 2009-01-23 13:17:10

Hi Jonathan, I thought I had the correct logic, but have now pasted my entire css file and html, because it is still not working and I am unsure why.

Joshxtothe4 2009-01-23 13:52:13

Answer 3

A:

You will want to use tbody (table body) to contain your data, and set overflow:scroll on that element to get the effect you are looking for.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>

        <style type="text/css" media="screen">
        table {

            margin:0;
            padding:0px;
        }

        tbody {
                height:80px;
                overflow-x:hidden;
                overflow-y:scroll;
                margin:0;
                padding:0;
            }
        table td, table th{ padding:2px;}

        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr><th>Header</th><th>Header</th><th>Header</th><th>Header</th></tr>
            </thead>

            <tbody>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>

            </tbody>
        </table>
    </body>
</html>

garrow 2009-02-24 10:54:49

ansaurus

tags:

views:

answers:

making a constant heading - css problem

related questions