Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>If I caught you right .. I made a <strong>demo</strong> for you <a href="http://jsfiddle.net/aV54L/" rel="noreferrer">http://jsfiddle.net/aV54L/</a><br> No jQuery, no JavaScript .. CSS only</p> <p>Here is the code:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body { margin : 0px; } #top1{ border-bottom:black; background: #dedede; position:fixed; top:0; left:0; width:50%; color: #000; height: 30px; z-index:5; } .col1{ width: 40%; border: 1px solid #000; } .col2{ width: 20%; border: 1px solid #000; } .col3{ width: 25%; border: 1px solid #000; } .col4{ width: 15%; border: 1px solid #000; } #tableHeader { width: 50%; top: 20px; position:fixed; background-color: red; z-index:10; } #table { position: relative; width: 50%; top: 50px; background-color: aqua; z-index:0; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="top1"&gt; blah blah blah &lt;/div&gt; &lt;div id="top2"&gt; &lt;table id="tableHeader" border="0" cellpadding="5" cellspacing="0"&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table id="table" border="0" cellpadding="5" cellspacing="0"&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="col1"&gt;column 1&lt;/th&gt; &lt;td class="col2"&gt;column 2&lt;/th&gt; &lt;td class="col3"&gt;column 3&lt;/th&gt; &lt;td class="col4"&gt;column 4&lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>As I say in the comment, I think that the <strong>problem with your code</strong> is to give <code>position:fixed</code> to thead tag. If it's not needed I suggest to use two tables as shown in the demo to let <code>positioning</code> to be understood correctly. I think this is not a hack as been said but it's accepting things like they work. I tried to change the original code as less as possible however.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload