Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I have two solutions for you. One is nice, but does not work in IE. One is ugly, but seems to work everywhere. First, the nice one, using divs and css:</p> <pre><code>&lt;style type="text/css"&gt; .container { width:500px; } .field { width:240px; display:table; float:left; } .label { white-space:nowrap; display:table-cell; width:1px; } .data { border-bottom: solid 1px black; width="100%";text-align:center; margin-left:10px; white-space:nowrap; display:table-cell; } .row { display:table-row; } &lt;/style&gt; &lt;div class="container"&gt; &lt;div class="field"&gt; &lt;div class="row"&gt; &lt;div class="label"&gt;label 1&lt;/div&gt; &lt;div class="data"&gt;data 1&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field"&gt; &lt;div class="row"&gt; &lt;div class="label"&gt;label 2&lt;/div&gt; &lt;div class="data"&gt;data 2 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field"&gt; &lt;div class="row"&gt; &lt;div class="label"&gt;label 3&lt;/div&gt; &lt;div class="data"&gt;data 3 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="field"&gt; &lt;div class="row"&gt; &lt;div class="label"&gt;label 4&lt;/div&gt; &lt;div class="data"&gt;data 4 &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Since IE doesn't support table-cell (etc), we need an ugly one:</p> <pre><code>&lt;style type="text/css"&gt; .table-field { width:240px; display:table; float:left; } .table-label { white-space:nowrap; } html&gt;body .table-label { width:1px; } /* force firefox to shrink label to fit text */ .table-data { border-bottom: solid 1px black; width="100%";text-align:center; white-space:nowrap; } &lt;/style&gt; &lt;div class="container"&gt; &lt;table class="table-field"&gt;&lt;tr&gt;&lt;td class="table-label"&gt;label 1&lt;/td&gt;&lt;td class="table-data"&gt;data 1&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;table class="table-field"&gt;&lt;tr&gt;&lt;td class="table-label"&gt;label 2&lt;/td&gt;&lt;td class="table-data"&gt;data 2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;table class="table-field"&gt;&lt;tr&gt;&lt;td class="table-label"&gt;label 3&lt;/td&gt;&lt;td class="table-data"&gt;data 3&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;table class="table-field"&gt;&lt;tr&gt;&lt;td class="table-label"&gt;label 4&lt;/td&gt;&lt;td class="table-data"&gt;data 4&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;table class="table-field"&gt;&lt;tr&gt;&lt;td class="table-label"&gt;label 5&lt;/td&gt;&lt;td class="table-data"&gt;data 5&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;table class="table-field"&gt;&lt;tr&gt;&lt;td class="table-label"&gt;label 6&lt;/td&gt;&lt;td class="table-data"&gt;data 6&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;/div&gt; </code></pre> <p>Either way, this needs colors and margins/padding to look good.</p>
    singulars
    1. This table or related slice is empty.
    1. POVariable-width inline underline effects in CSS
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USRay
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POVariable-width inline underline effects in CSS
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks Ray. The display:table-cell solution is pretty close. Initially I didn't like the hardcoded field width, but it looks like that's just a max width and it correctly shrinks to handle long labels. Also, it's not enforcing the two-per-row constraint, and if I lower the width it'll pull up a third. Though that might be even more flexible. . Regardless, not working in IE's kind of a problem. I'd thought about the table solution. It's a bit heavy, but it might be the only solution. I'll mull it over for a bit and see if anyone else has something. Otherwise, I'll give you the check.
      singulars
      1. PO
      1. USsidereal
    2. COThe widths in the 'field' and 'container' classes work together to keep two fields per row. You could do it a different way by having two separate 'field' classes - field-1 and field-2 for the first and second fields in each row. Add "clear:left" to field-1 to force field-1 to start on a new line.
      singulars
      1. PO
      1. USRay
 

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