StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLarge dynamically sized html table with a fixed scroll row and fixed scroll column
primarykey
Id
10838700
data
AcceptedAnswerId
10922732
AnswerCount
6
ClosedDate
CommentCount
5
CommunityOwnedDate
CreationDate
2012-05-31T17:53:42.143
FavoriteCount
21
LastActivityDate
2013-12-10T18:29:42.983
LastEditDate
2013-12-10T18:29:42.983
LastEditorUserId
1708520
OwnerUserId
65223
ParentId
0
PostTypeId
1
Score
49
ViewCount
29289
LastEditorDisplayName
text
Body
<p><strong>I need to display a large table on a web page and need to prevent the first column and first row from scrolling.</strong> I'd like to dynamically set the vertical size of this table (between some static size header/footer page content) to make it as tall as possible without forcing the browser window to have a vertical scrollbar.</p> <pre><code> browser window\/ +--------------------------------------------------------------+ /\ | /\ /\ /\ /\ /\ /\ /\ /\ | fixed static | web page header fields and text | | size | \/ \/ \/ \/ \/ \/ \/ \/ |__\/__ | +----<<<table-scrollbar>>>>>----------------+ | /\ |+--------------+--------+--------+--------+--------+-------+ | | || | |colspan | | | fixed | | | || fixed | fixed | fixed | fixed | fixed | more> | | | |+--------------+--+--+--+---+----+--+--+--+--------+-------++ | | || fixed | | | | | | | | | | || | | |+--------------+--+--+--+---+----+--+--+--+--------+-------+t | | || fixed | | | | | | | | | | |a | | |+--------------+--+--+--+---+----+--+--+--+--------+-------+b | | || fixed | | | | | | | | | | |l | | |+--------------+--+--+--+---+----+--+--+--+--------+-------+e | set || fixed | | | | | | | | | | || | dynamic || multi-line | | | | | | | | | | |s | size at |+--------------+--+--+--+---+----+--+--+--+--------+-------+c | runtime || fixed | | | | | | | | | | |r | | |+--------------+--+--+--+---+----+--+--+--+--------+-------+o | | || fixed | | | | | | | | | | |l | | |+--------------+--+--+--+---+----+--+--+--+--------+-------+l | | || fixed | | | | | | | | | | |b | | || | | | | | | | | | | |a |+--------------+--+--+--+---+----+--+--+--+--------+-------+r | | || fixed, moreV | | | | | | | | | | || | | |+--------------+--+--+--+---+----+--+--+--+--------+-------++ |__\/__ | /\ /\ /\ /\ /\ /\ /\ /\ | /\ | web page footer fields and text | fixed static | \/ \/ \/ \/ \/ \/ \/ \/ | | size +--------------------------------------------------------------+ \/ </code></pre> <p>this only needs to work in modern browsers, using all/any: html, css, javascript, jquery</p> <p>order of importance: </p> <ul> <li>complex table with many form fields, hidden values, javascript collapsing of rows, etc. which I'll add later </li> <li>1st row will have colspans </li> <li>rows will have variable height</li> <li>1st row: fixed from vertical scroll, but can scroll horizontally</li> <li>1st column: fixed from horizontal scroll, but can scroll vertical</li> <li>dynamically size this "table" to fill the screen between the static size header/footer html</li> <li>location of the scroll bars (as depicted in my awesome ascii art above) isn't critical.</li> </ul> <p>here is a very basic html sample of the screen, without any of the scroll/sizing features:</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <HTML> <HEAD> <TITLE>big scrolling table example</TITLE> </HEAD> <BODY> <form name="MyForm" method="POST" action="">  <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center"> <tr> <td width="35%" align="left">header junk left</td> <td >- HEADER JUNK MIDDLE -</td> <td width="35%" align="right">header junk right</td> </tr> </table> <br> <table border="0" width="95%" cellspacing="1" cellpadding="0" align="center"> <tr> <td width="60%" align="left">header junk left</td> <td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td> </tr>  <table border="1" width="95%" cellspacing="1" cellpadding="0" align="center"> <tr> <td>fixed can be long<br>or short</td> <td colspan="4">scroll A</td> <td colspan="2">scroll B</td> <td >scroll C</td> <td colspan="4">scroll D</td> <td colspan="2">scroll E</td> <td >scroll F</td> <td colspan="4">scroll G</td> <td colspan="2">scroll H</td> <td >scroll I</td> <td colspan="4">scroll J</td> <td colspan="2">scroll K</td> <td >scroll L</td> <td colspan="4">scroll M</td> <td colspan="2">scroll N</td> <td >scroll O</td> </tr> <tr> <td>fixed 2</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> <tr> <td>fixed 3</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> <tr> <td>fixed 4</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> <tr> <td>fixed 5</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> <tr> <td>fixed 6<br>6<br>6<br>6</td> <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td> <td>1 B</td><td>2 B</td> <td >1 C</td> <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td> <td>1 E</td><td>2 E</td> <td >1 F</td> <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td> <td>1 H</td><td>222 H</td> <td >1 I</td> <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td> <td>1 K</td><td>2 2 K<br>more..<br>more..</td> <td >1 L</td> <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td> <td>1 N</td><td>2 N</td> <td >1 1 1 1 1 1 1 O</td> </tr> </table>  <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center"> <tr> <td width="35%" align="left">footer junk left</td> <td >- FOOTER JUNK MIDDLE -</td> <td width="35%" align="right">footer junk right</td> </tr> </form> </BODY> </HTML> </code></pre>
Tags
<javascript><jquery><html><css><html-table>
Title
Large dynamically sized html table with a fixed scroll row and fixed scroll column
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USrapvelopment
UserOwnerUserId
1. USKM.
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
2. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
3. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POLarge dynamically sized html table with a fixed scroll row and fixed scroll column
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  POLarge dynamically sized html table with a fixed scroll row and fixed scroll column
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  POLarge dynamically sized html table with a fixed scroll row and fixed scroll column
  UserUserId
  USJared
  VoteTypeVoteTypeId
  VTFavorite
CommentsPostId

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.