Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This is a take just out of curiosity and I'm not sure this will fit you - anyway:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; table.sort_table {padding:0;margin:0;width:478px;font-size:12px;font-family:Arial, Helvetica, sans-serif;border-top:1px solid #ccc;border-left:1px solid #ccc;} table.sort_table tr td, table tr th {text-align:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding:4px;vertical-align:top;} table.sort_table tr.first_row td {color:red;} table.sort_table tr td.data_content {padding:0;} table.data_table {border:0;} table.data_table tr td {border-bottom:1px solid #ccc;border-right:1px solid #ccc;} table.data_table tr td.last {border-right:0;} table.data_table tr.last td {border-bottom:0;} .scroller {max-height:100px;overflow:auto;} .tdid {width:50px;} .tdname {width:200px;} .tdmail {width:200px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table cellpadding="0" cellspacing="0" class="sort_table"&gt; &lt;tr&gt; &lt;th class="tdid"&gt;Id&lt;/th&gt; &lt;th class="tdname"&gt;Name&lt;/th&gt; &lt;th class="tdmail"&gt;Email&lt;/th&gt; &lt;/tr&gt; &lt;tr class="first_row"&gt; &lt;td&gt;Uid&lt;/td&gt; &lt;td&gt;User name&lt;/td&gt; &lt;td&gt;User email&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="3" class="data_content"&gt; &lt;div class="scroller"&gt; &lt;table cellpadding="0" cellspacing="0" width="100%" class="data_table"&gt; &lt;tr&gt; &lt;td class="tdid"&gt;Uid&lt;/td&gt; &lt;td class="tdname"&gt;User name&lt;/td&gt; &lt;td class="last"&gt;User email&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Uid&lt;/td&gt; &lt;td&gt;User name&lt;/td&gt; &lt;td class="last"&gt;User email&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tdid"&gt;Uid&lt;/td&gt; &lt;td class="tdname"&gt;User name&lt;/td&gt; &lt;td class="last"&gt;User email&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Uid&lt;/td&gt; &lt;td&gt;User name&lt;/td&gt; &lt;td class="last"&gt;User email&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="tdid"&gt;Uid&lt;/td&gt; &lt;td class="tdname"&gt;User name&lt;/td&gt; &lt;td class="last"&gt;User email&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Uid&lt;/td&gt; &lt;td&gt;User name&lt;/td&gt; &lt;td class="last"&gt;User email&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The trick is to nest the data table inside the sort table. Since overflow:scroll or auto won't work on td you have to put a div with overflow set to auto inbetween. Only drawback is that you will have to make the <code>td</code> width fixed or else the second table cells won't align nicely. It uses than max-height to limit the data_content height (note you will need css fix for ie6 to make max-height work but can be done).</p> <p>Works from ie7+ on and if I had time could do it for ie6 too.</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