Databases
StackOverflow2013
Postsdbo
POHow to make a table, which is wider than screen size, scrollable and keep header row fixed?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make a table, which is wider than screen size, scrollable and keep header row fixed?
    primarykey
    data
    text
    <p>I've a <a href="http://jsbin.com/uwubu3/3" rel="nofollow noreferrer">table</a> with 2 columns and each column is 800px wide. I want to show this table in 800x50 window. So there should be horizontal and vertical scrollbar to view complete table.</p> <p>While I've found few related solutions (<a href="https://stackoverflow.com/questions/983031/jquery-how-to-freeze-table-header-and-allow-scrolling-of-the-rest-of-the-rows">this</a> and <a href="https://stackoverflow.com/questions/486576/frozen-table-header-inside-scrollable-div/1533619#1533619">this</a>) on SO, they only work if table width is smaller than screen size. In my case screen size is 1200px and total table width is 1600px.</p> <p>How could I do this? i want to achieve something like <a href="http://jsbin.com/olibo" rel="nofollow noreferrer">this</a>.</p> <p><strong>EDIT</strong> Oops, I forgot to add one more requirement. Sorry. I want the header of the table to remain fixed while user scrolls table.</p> <p><strong>EDIT2</strong></p> <p>I've tried below mentioned solutions to wrap in a div, but in this case vertical scrollbar doesn't show up. Please see <a href="http://jsbin.com/uwubu3/3" rel="nofollow noreferrer">this table</a> with wrapper div. It seems this problem only occurs if table width is bigger than screen size. I'm testing on FF3.6. </p> <p><strong>EDIT3</strong></p> <p>current <a href="http://jsbin.com/uwubu3/3" rel="nofollow noreferrer">table</a> code. This has no vertical scroller even though I can scroll vertically.</p> <pre><code>&lt;div style="overflow:scroll; width:800px;height:50px" &gt; &lt;table style="width:1600px" border="1"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th style="width:800px"&gt;id_1&lt;/th&gt; &lt;th style="width:800px"&gt;id_1&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody style=""&gt; &lt;tr&gt;&lt;td&gt;1200&lt;/td&gt;&lt;td&gt;1200&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;1200&lt;/td&gt;&lt;td&gt;1200&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;1200&lt;/td&gt;&lt;td&gt;1200&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;1200&lt;/td&gt;&lt;td&gt;1200&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;1200&lt;/td&gt;&lt;td&gt;1200&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;1200&lt;/td&gt;&lt;td&gt;1200&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USunderstack
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to make a table, which is wider than screen size, scrollable and keep header row fixed?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to make a table, which is wider than screen size, scrollable and keep header row fixed?
      1. USChad von Nau
      1. VTFavorite
    3. VO
      singulars
      1. POHow to make a table, which is wider than screen size, scrollable and keep header row fixed?
      1. USrpg89
      1. VTFavorite
    1. COI'm sorry, but 800x50 is an unusable dimension. Scrollbars alone take up about 20px, which leaves you about 30px to play with ... so you're asking your users to scroll with one or two rows visible at a time? Sure you didn't mean 800x500?
      singulars
      1. POHow to make a table, which is wider than screen size, scrollable and keep header row fixed?
      1. USRobusto
    2. COThose are fake numbers, I just want to make this table work and then change dimensions accordingly.
      singulars
      1. POHow to make a table, which is wider than screen size, scrollable and keep header row fixed?
      1. USunderstack
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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