StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
17571160
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2013-07-10T12:53:18.597
FavoriteCount
0
LastActivityDate
2013-07-10T12:53:18.597
LastEditDate
LastEditorUserId
0
OwnerUserId
1084437
ParentId
17565877
PostTypeId
2
Score
3
ViewCount
0
LastEditorDisplayName
text
Body
<p>I’m afraid there’s no direct solution. You could play with JavaScript, creating copy of the table containing only the first row, get its width, discard the copy, and use the width to set the width of your real table. Combined with the setting <code>table-layout: fixed</code>, this should handle the situation. You can simplify the approach so that you do not create a copy of the table but instead remove the second row, later add it back. It gets rather ugly:</p> <pre><code><!doctype html> <title>Hack</title> <style> table { table-layout: fixed } tr:first-child td { white-space: nowrap } </style> <table id=tbl> <tbody id=tbody> <tr> <td id=cell1>Cell 1</td> <td id=cell2>Cell 2</td> </tr> <tr id=row2><td colspan=2> Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width. </table> <script> var tbl = document.getElementById('tbl'); var tbody = document.getElementById('tbody'); var row2 = document.getElementById('row2'); var cell1 = document.getElementById('cell1'); var cell2 = document.getElementById('cell2'); tbody.removeChild(row2); var width = tbl.clientWidth; var width1 = cell1.clientWidth; var width2 = cell2.clientWidth; tbody.appendChild(row2); cell1.style.width = width1 + 'px'; cell2.style.width = width2 + 'px'; tbl.style.width = width + 'px'; </script> </code></pre> <p>A completely different idea is to use a workaround where the long text is not in a cell but in a <code>caption</code> element, placed at the bottom of the table:</p> <pre><code><table> <caption align=bottom style="text-align: left"> Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width. <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow to wrap long HTML table cell
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USJukka K. Korpela
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POHow to wrap long HTML table cell
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTAcceptedByOriginator
CommentsPostId
1. COWow the simple <caption> solution works perfectly. Updated fiddle here: http://jsfiddle.net/qLpuq/2/
  singulars
  PostPostId
  PO
  UserUserId
  USaschoenebeck

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.